/* Peyda webfont
   Expected files are installed under static/fonts/peyda/. */
@font-face {
  font-family: "Peyda";
  src: url("../fonts/peyda/peydaWeb-light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Peyda";
  src: url("../fonts/peyda/PeydaWeb-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Peyda";
  src: url("../fonts/peyda/PeydaWeb-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Peyda";
  src: url("../fonts/peyda/PeydaWeb-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Peyda";
  src: url("../fonts/peyda/PeydaWeb-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Peyda";
  src: url("../fonts/peyda/PeydaWeb-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Peyda";
  src: url("../fonts/peyda/PeydaWeb-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f6f9fc;
  --surface: #ffffff;
  --surface-2: #eef4f8;
  --surface-3: #e5edf3;
  --text: #102538;
  --muted: #657789;
  --line: #dce5ec;
  --line-strong: #c8d4de;
  --primary: #e51f2b;
  --primary-dark: #b9121e;
  --primary-soft: #fff0f1;
  --navy: #0c1c29;
  --navy-2: #132b3d;
  --shadow: 0 18px 50px rgba(18, 43, 61, .10);
  --shadow-sm: 0 8px 24px rgba(18, 43, 61, .08);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --container: 1240px;
  --header-height: 82px;
  --font-fa: "Peyda", Tahoma, "Segoe UI", Arial, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07141e;
  --surface: #0c1b27;
  --surface-2: #102331;
  --surface-3: #142a39;
  --text: #eff6fb;
  --muted: #9aabb9;
  --line: #1c3444;
  --line-strong: #294657;
  --primary: #f12735;
  --primary-dark: #d31b28;
  --primary-soft: #2b151b;
  --navy: #06111a;
  --navy-2: #0b1d2a;
  --shadow: 0 22px 58px rgba(0, 0, 0, .25);
  --shadow-sm: 0 10px 26px rgba(0, 0, 0, .20);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-fa);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background .25s ease, color .25s ease;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.narrow { width: min(860px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 88px 0; position: relative; }
.section-tint { background: var(--surface-2); border-block: 1px solid var(--line); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-size: 13px; font-weight: 800; letter-spacing: .01em; }
.eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 9px; background: currentColor; }
.section-head { margin-bottom: 34px; }
.section-head h2, .page-hero h1, .hero-copy h1 { margin: 8px 0 0; letter-spacing: -.04em; }
.section-head h2 { font-size: clamp(26px, 3vw, 38px); }
.split-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.center-head { text-align: center; max-width: 700px; margin-inline: auto; }
.center-head .eyebrow { justify-content: center; }
.text-link { color: var(--primary); font-weight: 800; white-space: nowrap; transition: .2s ease; }
.text-link:hover { transform: translateX(-4px); }

.btn { min-height: 48px; border: 1px solid transparent; border-radius: 12px; padding: 10px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, var(--primary), #f4434d); color: #fff; box-shadow: 0 12px 30px rgba(229,31,43,.22); }
.btn-primary:hover { box-shadow: 0 16px 34px rgba(229,31,43,.31); }
.btn-outline { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 78%, transparent); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-block { width: 100%; }

.site-header { height: var(--header-height); position: sticky; top: 0; z-index: 1000; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; background: var(--primary); color: #fff; border-radius: 9px 2px 9px 2px; font: 900 27px/1 Arial; transform: skew(-7deg); box-shadow: inset -8px 0 rgba(255,255,255,.10); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy b { font-size: 18px; }
.brand-copy small { margin-top: 5px; font-size: 8px; letter-spacing: .13em; color: var(--muted); direction: ltr; }
.desktop-nav { display: flex; align-items: stretch; align-self: stretch; gap: 4px; margin-inline: auto; }
.desktop-nav a { position: relative; display: flex; align-items: center; padding: 0 12px; font-size: 13px; font-weight: 700; color: var(--muted); transition: .2s ease; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--text); }
.desktop-nav a.active::after, .desktop-nav a:hover::after { content: ""; position: absolute; inset-inline: 12px; bottom: 0; height: 3px; border-radius: 5px 5px 0 0; background: var(--primary); }
.header-actions { display: flex; align-items: center; gap: 9px; }
.icon-button { width: 43px; height: 43px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); display: grid; place-items: center; cursor: pointer; transition: .2s ease; }
.icon-button:hover { border-color: var(--primary); color: var(--primary); }
.theme-toggle { position: relative; }
.theme-icon { grid-area: 1/1; transition: .25s ease; }
html[data-theme="light"] .theme-icon-moon { opacity: 1; transform: scale(1); }
html[data-theme="light"] .theme-icon-sun { opacity: 0; transform: scale(.5) rotate(90deg); }
html[data-theme="dark"] .theme-icon-sun { opacity: 1; transform: scale(1); }
html[data-theme="dark"] .theme-icon-moon { opacity: 0; transform: scale(.5) rotate(-90deg); }
.menu-toggle { display: none; padding: 10px; }
.menu-toggle span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; margin: 2px 0; }
.mobile-menu { display: none; }

.hero-shell { min-height: 610px; position: relative; overflow: hidden; background: linear-gradient(120deg, var(--navy) 0%, #122b3d 53%, #254355 100%); color: #fff; border-bottom: 1px solid var(--line); }
.hero-shell::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 75% 10%, rgba(255,255,255,.14), transparent 35%), linear-gradient(90deg, rgba(5,15,23,.3), transparent 60%); pointer-events: none; }
.hero-media { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(90deg, rgba(7,20,30,.92), rgba(7,20,30,.1)), var(--hero-image, none); background-size: cover; background-position: center; mix-blend-mode: normal; }
.hero-grid { min-height: 610px; display: grid; grid-template-columns: .87fr 1.13fr; gap: 40px; align-items: center; position: relative; z-index: 2; }
.hero-copy { padding: 68px 0; }
.hero-copy .eyebrow { color: #d8e5ee; direction: ltr; letter-spacing: .22em; font-size: 11px; }
.hero-copy h1 { font-size: clamp(40px, 5vw, 72px); line-height: 1.25; font-weight: 900; }
.hero-copy h1 strong { color: #fff; position: relative; }
.hero-copy h1 strong::first-letter { color: var(--primary); }
.hero-copy p { color: #d2dde5; max-width: 620px; font-size: 16px; margin: 22px 0 28px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-shell .btn-outline { color: #fff; border-color: rgba(255,255,255,.34); background: rgba(4,12,18,.16); }
.hero-points { display: flex; gap: 24px; margin-top: 34px; color: #c8d5de; font-size: 12px; }
.hero-points span { display: flex; align-items: center; gap: 7px; }
.hero-points span::before { content: ""; width: 6px; height: 6px; background: var(--primary); border-radius: 50%; }
.hero-art { align-self: stretch; position: relative; }
.truck-stage { position: absolute; inset: 8% 0 0; overflow: hidden; }
.mountain { position: absolute; bottom: 28%; width: 55%; height: 49%; background: linear-gradient(145deg, transparent 49%, rgba(180,202,215,.14) 50%), linear-gradient(35deg, transparent 49%, rgba(255,255,255,.08) 50%); clip-path: polygon(0 100%, 28% 35%, 46% 68%, 66% 20%, 100% 100%); }
.mountain-a { right: -3%; transform: scale(1.15); }
.mountain-b { left: 3%; opacity: .7; transform: scale(.8); }
.road-line { position: absolute; left: -10%; right: -10%; bottom: 15%; height: 12px; transform: skewY(-2deg); background: linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.85) 8% 20%, transparent 20% 34%, rgba(255,255,255,.85) 34% 48%, transparent 48% 62%, rgba(255,255,255,.85) 62% 76%, transparent 76%); filter: blur(.3px); opacity: .7; }
.truck { position: absolute; bottom: 20%; filter: drop-shadow(0 24px 24px rgba(0,0,0,.35)); }
.truck .cab { position: absolute; right: 0; bottom: 18px; width: 118px; height: 138px; background: linear-gradient(135deg, #cad7df, #5f7585 65%, #364956); border-radius: 19px 22px 8px 8px; box-shadow: inset 0 -22px rgba(5,17,26,.36); }
.truck .cab::before { content:""; position:absolute; top:18px; left:14px; right:14px; height:47px; background:linear-gradient(145deg,#213644,#09131a); border-radius:7px 7px 3px 3px; border:2px solid rgba(255,255,255,.13); }
.truck .cab::after { content:"R"; position:absolute; right:42px; bottom:26px; font:900 27px Arial; color:#fff; }
.truck .body { position: absolute; bottom: 24px; right: 106px; width: 250px; height: 126px; background: linear-gradient(90deg, #cbd5dc, #6c7f8d); border-radius: 10px 3px 3px 4px; box-shadow: inset 0 -18px rgba(10,25,35,.22), inset -16px 0 rgba(255,255,255,.08); }
.truck i { position: absolute; bottom: 0; width: 48px; height: 48px; border: 10px solid #111a20; background: #778993; border-radius: 50%; box-shadow: inset 0 0 0 4px #263640; }
.truck i:nth-of-type(1) { right: 32px; }
.truck i:nth-of-type(2) { right: 144px; }
.truck i:nth-of-type(3) { right: 228px; }
.truck-main { right: 1%; width: 390px; height: 190px; transform: scale(1.12); z-index: 3; }
.truck-main .cab { background: linear-gradient(135deg, #e6343d, #7a1018 70%); }
.truck-main .body { background: linear-gradient(90deg, #c9d3da, #788a96); }
.truck-back { left: 1%; bottom: 23%; width: 350px; height: 176px; transform: scale(.8); opacity: .84; }

.benefit-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.benefit-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.benefit-grid article { display: flex; align-items: center; justify-content: center; gap: 13px; padding: 23px 20px; position: relative; }
.benefit-grid article + article { border-right: 1px solid var(--line); }
.benefit-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 21px; font-weight: 900; }
.benefit-grid b { display: block; font-size: 14px; }
.benefit-grid small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }

.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.category-card { min-width: 0; padding: 14px; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: .25s ease; }
.category-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.category-visual { height: 170px; border-radius: 14px; background: radial-gradient(circle at 50% 18%, #fff 0, #e9f0f4 50%, #dbe5eb 100%); display: grid; place-items: center; overflow: hidden; }
html[data-theme="dark"] .category-visual { background: radial-gradient(circle at 50% 18%, #203747 0, #132735 55%, #0a1c28 100%); }
.category-visual img { width: 100%; height: 100%; object-fit: cover; }
.category-card h3 { margin: 15px 0 3px; font-size: 18px; }
.category-card p { margin: 0; color: var(--muted); font-size: 12px; min-height: 45px; }
.card-arrow { position: absolute; left: 16px; bottom: 17px; color: var(--primary); font-weight: 900; }

.product-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.home-products { margin-top: 26px; }
.product-card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: .25s ease; }
.product-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--primary) 42%, var(--line)); box-shadow: var(--shadow); }
.product-image { height: 210px; background: linear-gradient(145deg, #e8eff4, #f9fbfc); position: relative; overflow: hidden; display: grid; place-items: center; }
html[data-theme="dark"] .product-image { background: linear-gradient(145deg, #112735, #0b1c28); }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .product-image img { transform: scale(1.035); }
.pill { position: absolute; top: 12px; right: 12px; border-radius: 999px; padding: 5px 10px; background: var(--primary); color: #fff; font-size: 10px; z-index: 2; }
.product-body { padding: 18px; }
.product-meta { min-height: 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--primary); font-size: 10px; font-weight: 800; }
.product-meta span { color: var(--muted); direction: ltr; }
.product-body h2, .product-body h3 { margin: 7px 0; font-size: 18px; line-height: 1.55; }
.product-body p { margin: 0 0 15px; min-height: 53px; color: var(--muted); font-size: 12px; }
.product-bottom { padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.product-bottom strong { font-size: 15px; color: var(--text); }
.product-bottom strong small { color: var(--muted); font-weight: 500; }
.product-bottom > span { color: var(--primary); font-size: 11px; font-weight: 800; }
.vehicle-placeholder { position: relative; width: 78%; height: 70%; }
.vehicle-placeholder span { position: absolute; right: 13%; bottom: 25%; width: 30%; height: 48%; border-radius: 15px 18px 5px 5px; background: linear-gradient(135deg, #324a5b, #152733); box-shadow: inset 0 12px rgba(255,255,255,.10); }
.vehicle-placeholder span::before { content:""; position:absolute; top:10%; left:12%; right:12%; height:34%; background:#8fb0c0; opacity:.45; border-radius:5px; }
.vehicle-placeholder::before { content:""; position:absolute; right:39%; bottom:28%; width:46%; height:38%; background:linear-gradient(90deg,#dce4e8,#7d909c); border-radius:7px 2px 2px 3px; }
.vehicle-placeholder i { position:absolute; bottom:17%; width:18%; aspect-ratio:1; border-radius:50%; background:#17232b; border:5px solid #263843; }
.vehicle-placeholder i:first-of-type { right:18%; }
.vehicle-placeholder i:last-of-type { right:57%; }
.vehicle-placeholder.big { width: 70%; height: 70%; }

.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 44px; align-items: center; }
.about-copy h2 { font-size: clamp(28px,4vw,44px); margin: 9px 0 14px; }
.about-copy p, .rich-intro { color: var(--muted); margin-bottom: 22px; }
.about-image-wrap { min-height: 420px; position: relative; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.about-image-wrap > img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.building-art { min-height: 420px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(145deg, #263d4f, #0c1c29); color: #fff; }
.building-art::before { content:""; position:absolute; inset:24% 12% 0; background: linear-gradient(90deg, transparent 49%, rgba(255,255,255,.08) 50%), linear-gradient(rgba(255,255,255,.08) 49%, transparent 50%); background-size: 52px 52px; border: 8px solid rgba(255,255,255,.10); transform: perspective(500px) rotateX(8deg); }
.building-art span, .building-art b { position: relative; z-index: 2; }
.building-art span { color: var(--primary); font: 900 72px Arial; }
.building-art b { letter-spacing: .18em; font-size: 14px; direction: ltr; }
.stat-panel { position: absolute; right: 16px; left: 16px; bottom: 16px; padding: 14px; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 17px; background: rgba(5,16,24,.76); backdrop-filter: blur(13px); color: #fff; }
.stat-panel div { text-align: center; }
.stat-panel strong { display: block; font-size: 21px; }
.stat-panel span { color: #c6d2da; font-size: 10px; }

.why-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.why-grid.four { grid-template-columns: repeat(4,1fr); }
.why-grid article { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 25px 17px; box-shadow: var(--shadow-sm); }
.why-grid article > span { width: 48px; height: 48px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 14px; background: var(--surface-2); color: var(--primary); font-size: 22px; font-weight: 900; }
.why-grid h3 { margin: 5px 0; font-size: 15px; }
.why-grid p { margin: 0; color: var(--muted); font-size: 11px; }

.service-band { background: var(--navy); color:#fff; border-block: 1px solid rgba(255,255,255,.08); }
.service-grid { display:grid; grid-template-columns: 1fr 1fr; min-height: 430px; }
.service-visual { min-height: 430px; margin-right: calc((100vw - min(var(--container), calc(100vw - 40px))) / -2); overflow: hidden; position: relative; background: linear-gradient(135deg,#203749,#08151f); }
.mechanic-art { position:absolute; inset:0; display:flex; align-items:end; padding:42px max(42px, calc((100vw - var(--container))/2)); background: radial-gradient(circle at 30% 30%, rgba(229,31,43,.22), transparent 28%), repeating-linear-gradient(135deg, transparent 0 40px, rgba(255,255,255,.025) 40px 42px); }
.mechanic-art::before { content:""; position:absolute; left:11%; bottom:0; width:53%; height:77%; background:linear-gradient(#172d3b,#0d1d28); clip-path:polygon(28% 0,78% 10%,100% 100%,0 100%); border-radius:25% 25% 0 0; opacity:.95; }
.mechanic-art .wrench { position:absolute; left:30%; top:30%; font-size:78px; color:var(--primary); transform:rotate(-25deg); filter:drop-shadow(0 10px 20px rgba(0,0,0,.35)); }
.mechanic-art b { position:relative; z-index:2; font-size:28px; line-height:1.4; }
.service-copy { padding: 66px 0 66px 55px; display:flex; flex-direction:column; justify-content:center; }
.service-copy h2 { font-size: 38px; margin:7px 0 12px; }
.service-copy p { color:#c5d2da; }
.service-mini-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:22px; }
.service-mini-grid article { min-height:70px; display:flex; align-items:center; gap:12px; padding:15px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(255,255,255,.035); }
.service-mini-grid span { color:var(--primary); font-size:20px; }

.article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.article-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:.25s ease; }
.article-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.article-image { height:190px; background:linear-gradient(135deg,var(--surface-3),var(--surface-2)); position:relative; overflow:hidden; }
.article-image img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.article-card:hover .article-image img { transform:scale(1.035); }
.article-body { padding:18px; }
.article-body small { color:var(--muted); font-size:10px; }
.article-body h2, .article-body h3 { margin:6px 0 8px; font-size:16px; line-height:1.7; }
.article-body p { color:var(--muted); font-size:11px; min-height:45px; }
.article-body > span { color:var(--primary); font-weight:800; font-size:11px; }

.faq-home-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:55px; align-items:start; }
.faq-home-grid h2 { font-size:36px; margin:7px 0 10px; }
.faq-home-grid > div:first-child p { color:var(--muted); }
.accordion-list { display:flex; flex-direction:column; gap:10px; }
.accordion-list details { border:1px solid var(--line); background:var(--surface); border-radius:14px; overflow:hidden; }
.accordion-list summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:15px; font-weight:800; padding:17px 18px; }
.accordion-list summary::-webkit-details-marker { display:none; }
.accordion-list summary span { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:var(--surface-2); color:var(--primary); transition:.2s ease; }
.accordion-list details[open] summary span { transform:rotate(45deg); }
.accordion-list details p { color:var(--muted); margin:0; padding:0 18px 17px; font-size:13px; border-top:1px solid var(--line); padding-top:14px; }
.accordion-list.large summary { font-size:15px; padding:22px; }

.page-hero { min-height:400px; display:flex; align-items:center; background:linear-gradient(125deg,var(--navy) 0%,#17364b 65%,#274b61); color:#fff; position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 17% 25%,rgba(255,255,255,.14),transparent 28%), repeating-linear-gradient(135deg,transparent 0 58px,rgba(255,255,255,.025) 58px 60px); }
.page-hero > .container { position:relative; z-index:2; }
.page-hero h1 { font-size:clamp(36px,5vw,56px); }
.page-hero p { color:#d2dce3; max-width:680px; }
.compact-hero { min-height:310px; }
.page-hero-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; align-items:center; padding-block:45px; }
.page-hero-art { min-height:280px; border-radius:22px; }
.breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:var(--muted); font-size:11px; margin-bottom:25px; }
.breadcrumbs a:hover { color:var(--primary); }

.catalog-toolbar { display:flex; gap:10px; max-width:680px; margin-bottom:20px; }
.search-box { flex:1; height:50px; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:0 15px; }
.search-box span { color:var(--muted); font-size:20px; }
.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--text); }
.category-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.category-chips a { padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted); font-size:11px; font-weight:800; transition:.2s ease; }
.category-chips a:hover, .category-chips a.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.category-chips small { opacity:.7; }
.catalog-grid { grid-template-columns:repeat(4,1fr); }
.empty-state { text-align:center; padding:70px 25px; border:1px dashed var(--line-strong); border-radius:var(--radius-xl); background:var(--surface); }
.empty-state > span { width:70px; height:70px; display:grid; place-items:center; margin:0 auto 10px; border-radius:18px; background:var(--surface-2); color:var(--primary); font-size:34px; }
.empty-state h2 { margin:5px 0; }
.empty-state p { color:var(--muted); }

.product-detail-section { padding-top:42px; }
.product-detail-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:start; }
.product-gallery { position:sticky; top:calc(var(--header-height) + 22px); }
.main-product-image { min-height:500px; border:1px solid var(--line); border-radius:var(--radius-xl); background:linear-gradient(145deg,var(--surface-2),var(--surface)); overflow:hidden; display:grid; place-items:center; }
.main-product-image img { width:100%; height:500px; object-fit:cover; }
.gallery-thumbs { display:flex; gap:9px; margin-top:12px; overflow:auto; padding-bottom:3px; }
.gallery-thumbs button { width:76px; height:68px; flex:0 0 auto; padding:3px; border:2px solid transparent; background:var(--surface); border-radius:11px; overflow:hidden; cursor:pointer; }
.gallery-thumbs button.active { border-color:var(--primary); }
.gallery-thumbs img { width:100%; height:100%; object-fit:cover; border-radius:7px; }
.product-info-panel { padding:20px 0; }
.product-info-panel h1 { font-size:clamp(32px,4vw,48px); line-height:1.35; margin:10px 0 13px; }
.info-tags { display:flex; flex-wrap:wrap; gap:8px; }
.info-tags span { background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:7px 10px; color:var(--muted); font-size:11px; }
.info-tags b { color:var(--text); }
.product-lead { color:var(--muted); font-size:14px; margin:22px 0; }
.price-box { border:1px solid var(--line); border-radius:18px; background:var(--surface); padding:20px; margin:20px 0; box-shadow:var(--shadow-sm); }
.price-box > small { color:var(--muted); }
.price-box strong { display:block; color:var(--primary); font-size:27px; margin:2px 0; }
.price-box strong span { font-size:13px; color:var(--muted); }
.price-box p { margin:0; color:var(--muted); font-size:10px; }
.detail-actions { display:flex; gap:10px; }
.trust-row { display:flex; flex-wrap:wrap; gap:9px 15px; margin-top:20px; color:var(--muted); font-size:10px; }
.product-content-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:22px; margin-top:50px; align-items:start; }
.content-card, .spec-card, .contact-form-card, .contact-info-card, .source-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-sm); }
.content-card h2, .spec-card h2 { margin-top:0; }
.spec-card dl { margin:0; }
.spec-card dl > div { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-size:12px; }
.spec-card dl > div:last-child { border-bottom:0; }
.spec-card dt { color:var(--muted); }
.spec-card dd { margin:0; font-weight:800; text-align:left; }
.rich-content { color:var(--text); }
.rich-content p, .rich-content li { color:var(--muted); }
.rich-content h2, .rich-content h3 { margin-top:1.7em; }
.rich-content img { border-radius:16px; margin:22px auto; }
.rich-content a { color:var(--primary); text-decoration:underline; text-underline-offset:3px; }
.rich-content table { width:100%; border-collapse:collapse; overflow:hidden; border-radius:12px; }
.rich-content td, .rich-content th { border:1px solid var(--line); padding:10px; }

.about-page-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
.rounded-media { width:100%; max-height:460px; object-fit:cover; border-radius:var(--radius-xl); box-shadow:var(--shadow); }
.about-visual-placeholder { min-height:300px; border-radius:var(--radius-xl); display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(145deg,var(--navy),#1a3a4e); color:#fff; }
.about-visual-placeholder span { font-size:64px; font-weight:900; color:var(--primary); }
.about-stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px; }
.about-stat-grid div { padding:18px; border:1px solid var(--line); border-radius:15px; background:var(--surface); text-align:center; }
.about-stat-grid b { display:block; font-size:24px; color:var(--primary); }
.about-stat-grid span { color:var(--muted); font-size:10px; }

.contact-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:start; }
.contact-form-card form { display:flex; flex-direction:column; gap:14px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-form-card label > span { display:block; margin-bottom:5px; color:var(--muted); font-size:11px; font-weight:700; }
.contact-form-card input, .contact-form-card textarea { width:100%; border:1px solid var(--line); background:var(--surface-2); color:var(--text); border-radius:11px; padding:11px 13px; outline:0; transition:.2s ease; }
.contact-form-card input { height:48px; }
.contact-form-card input:focus, .contact-form-card textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent); }
.field-error { display:block; color:var(--primary); margin-top:3px; }
.contact-info-card { background:var(--navy); color:#fff; position:sticky; top:calc(var(--header-height) + 22px); }
.contact-info-card h2 { font-size:28px; margin:5px 0 20px; }
.contact-items { display:flex; flex-direction:column; gap:9px; margin:15px 0 20px; }
.contact-items a { display:flex; align-items:center; gap:13px; border:1px solid rgba(255,255,255,.12); border-radius:13px; padding:13px; background:rgba(255,255,255,.03); }
.contact-items a > span { width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.08); color:var(--primary); }
.contact-items small { display:block; color:#9fb0bc; font-size:9px; }
.contact-items b { display:block; font-size:12px; word-break:break-word; }
.contact-info-card .btn-outline { border-color:rgba(255,255,255,.23); color:#fff; background:rgba(255,255,255,.035); }

.article-page-grid { grid-template-columns:repeat(3,1fr); }
.article-detail-hero { padding:70px 0 0; background:linear-gradient(180deg,var(--surface-2),var(--bg)); }
.article-detail-hero h1 { font-size:clamp(34px,5vw,52px); line-height:1.45; margin:10px 0; }
.article-lead { color:var(--muted); font-size:15px; }
.article-meta { display:flex; flex-wrap:wrap; gap:15px; color:var(--muted); font-size:10px; margin:15px 0 28px; }
.article-cover { width:100%; max-height:520px; object-fit:cover; border-radius:var(--radius-xl); box-shadow:var(--shadow); }
.article-content-section { padding-top:45px; }
.article-rich { font-size:15px; line-height:2.15; }
.article-rich h2 { font-size:28px; line-height:1.6; }
.article-rich h3 { font-size:21px; line-height:1.7; }
.article-rich blockquote { margin:25px 0; padding:16px 20px; border-right:4px solid var(--primary); background:var(--surface-2); border-radius:12px; }
.source-card { margin-top:30px; display:flex; flex-direction:column; gap:6px; }
.source-card h3 { margin:0 0 8px; }
.source-card a { color:var(--primary); }

.footer-cta { background:linear-gradient(110deg,#1d3546,#081722 70%,#132d3e); color:#fff; border-top:1px solid rgba(255,255,255,.08); }
.footer-cta-inner { min-height:302px; display:flex; align-items:center; justify-content:space-between; gap:40px; position:relative; overflow:hidden; }
.footer-cta-inner::after { content:""; position:absolute; left:23%; bottom:-40px; width:330px; height:140px; background:linear-gradient(135deg,transparent 20%,rgba(255,255,255,.06)); transform:skewX(-18deg); }
.footer-cta h2 { font-size:30px; margin:2px 0; }
.footer-cta p { margin:0; color:#bac8d1; }
.site-footer { background:var(--surface); border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:1.4fr .8fr 1.2fr .8fr; gap:35px; padding:55px 0 35px; }
.footer-grid h3 { font-size:13px; margin:0 0 12px; }
.footer-grid > div:not(.footer-brand) > a, .footer-grid > div:not(.footer-brand) > p { display:block; margin:6px 0; color:var(--muted); font-size:11px; }
.footer-grid a:hover { color:var(--primary); }
.footer-brand p { color:var(--muted); font-size:11px; }
.social-row { display:flex; flex-wrap:wrap; gap:8px; }
.footer-grid .social-row .social-link { width:34px; height:34px; margin:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; color:var(--muted); font-size:10px; font-weight:700; line-height:1; transition:transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease; }
.footer-grid .social-row .social-link:hover { transform:translateY(-2px); color:var(--primary); border-color:var(--primary); background:var(--surface-2); }
.footer-bottom { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:var(--muted); font-size:9px; }
.footer-bottom div { display:flex; gap:18px; }

.toast-stack { position:fixed; z-index:1600; top:calc(var(--header-height) + 18px); left:20px; display:flex; flex-direction:column; gap:8px; }
.toast { max-width:390px; padding:13px 16px; border-radius:12px; background:#143b29; color:#fff; box-shadow:var(--shadow); font-size:11px; animation:toast-in .3s ease both; }
.toast.error { background:#6a1720; }
@keyframes toast-in { from { opacity:0; transform:translateY(-8px); } }

.error-page { min-height:calc(100vh - var(--header-height)); display:grid; place-items:center; padding:50px 20px; text-align:center; }
.error-card { max-width:620px; }
.error-code { font-size:clamp(80px,15vw,170px); font-weight:900; line-height:1; color:var(--primary); opacity:.16; }
.error-card h1 { margin-top:-25px; }

@media (max-width: 1120px) {
  .desktop-nav { display:none; }
  .header-actions { margin-right:auto; }
  .menu-toggle { display:grid; }
  .hero-grid { grid-template-columns:1fr 1fr; }
  .category-grid, .product-grid, .catalog-grid { grid-template-columns:repeat(3,1fr); }
  .why-grid { grid-template-columns:repeat(3,1fr); }
  .benefit-grid article { padding-inline:12px; }
  .benefit-grid article small { display:none; }
  .footer-grid { grid-template-columns:1.2fr .8fr 1fr; }
  .footer-grid > div:last-child { grid-column:2/4; }
  .mobile-menu { display:block; position:fixed; inset:0; background:rgba(2,10,15,.65); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:.25s ease; }
  .mobile-menu.open { opacity:1; visibility:visible; }
  .mobile-menu-panel { width:min(390px,88vw); height:100%; margin-right:auto; padding:20px; background:var(--navy); color:#fff; transform:translateX(-100%); transition:.28s cubic-bezier(.2,.7,.2,1); display:flex; flex-direction:column; }
  .mobile-menu.open .mobile-menu-panel { transform:translateX(0); }
  .mobile-menu-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.11); }
  .mobile-menu .brand-copy small { color:#9fb2bf; }
  .menu-close { border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#fff; font-size:24px; }
  .mobile-nav { display:flex; flex-direction:column; gap:4px; margin:22px 0 auto; }
  .mobile-nav a { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:8px; padding:13px 8px; border-bottom:1px solid rgba(255,255,255,.07); }
  .mobile-nav a > span { color:var(--primary); }
  .mobile-nav b { color:#738894; font-size:18px; }
  .mobile-call { margin-top:10px; min-height:46px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.1); border-radius:12px; color:#b9c7d0; font-size:11px; }
}

@media (max-width: 900px) {
  .section { padding:70px 0; }
  .hero-shell, .hero-grid { min-height:670px; }
  .hero-grid { grid-template-columns:1fr; align-items:start; }
  .hero-copy { padding:58px 0 0; text-align:center; position:relative; z-index:3; }
  .hero-copy .eyebrow, .hero-actions, .hero-points { justify-content:center; }
  .hero-copy p { margin-inline:auto; }
  .hero-art { min-height:300px; }
  .truck-stage { inset:-8% 5% 0; }
  .truck-main { right:20%; transform:scale(.88); }
  .truck-back { left:5%; transform:scale(.63); }
  .benefit-grid { grid-template-columns:repeat(2,1fr); }
  .benefit-grid article:nth-child(3) { border-top:1px solid var(--line); border-right:0; }
  .benefit-grid article:nth-child(4) { border-top:1px solid var(--line); }
  .category-grid { grid-template-columns:repeat(2,1fr); }
  .product-grid, .catalog-grid { grid-template-columns:repeat(2,1fr); }
  .about-grid, .about-page-grid, .contact-grid, .product-detail-grid, .product-content-grid, .faq-home-grid { grid-template-columns:1fr; }
  .about-copy { order:2; }
  .why-grid, .why-grid.four { grid-template-columns:repeat(2,1fr); }
  .service-grid { grid-template-columns:1fr; }
  .service-visual { margin:0; min-height:330px; }
  .service-copy { padding:45px 0; }
  .article-grid, .article-page-grid { grid-template-columns:repeat(2,1fr); }
  .page-hero-grid { grid-template-columns:1fr; }
  .page-hero-art { display:none; }
  .product-gallery, .contact-info-card { position:static; }
  .main-product-image, .main-product-image img { min-height:380px; height:380px; }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid > div:last-child { grid-column:auto; }
  .footer-cta-inner { min-height:349px; }
}

@media (max-width: 620px) {
  :root { --header-height: 68px; }
  .container, .narrow { width:min(100% - 24px, var(--container)); }
  .header-cta { display:none; }
  .brand-mark { width:36px; height:36px; font-size:23px; }
  .brand-copy b { font-size:15px; }
  .brand-copy small { font-size:7px; }
  .icon-button { width:39px; height:39px; }
  .theme-toggle { display:none; }
  .hero-shell, .hero-grid { min-height:720px; }
  .hero-copy { padding-top:42px; }
  .hero-copy h1 { font-size:42px; }
  .hero-copy p { font-size:13px; }
  .hero-actions { flex-direction:column; width:min(340px,100%); margin-inline:auto; }
  .hero-actions .btn { width:100%; }
  .hero-points { gap:13px; font-size:9px; }
  .hero-art { min-height:310px; }
  .truck-stage { inset:0 -12%; }
  .truck-main { right:19%; transform:scale(.75); bottom:19%; }
  .truck-back { display:none; }
  .benefit-grid article { justify-content:flex-start; padding:16px 12px; }
  .benefit-icon { width:38px; height:38px; }
  .section { padding:56px 0; }
  .split-head { align-items:flex-start; }
  .split-head .text-link { display:none; }
  .category-grid { grid-template-columns:1fr; }
  .category-card { display:grid; grid-template-columns:112px 1fr; align-items:center; gap:12px; min-height:122px; }
  .category-visual { height:95px; }
  .category-card h3 { margin:0; }
  .category-card p { min-height:0; font-size:10px; }
  .card-arrow { bottom:16px; }
  .product-grid, .catalog-grid { grid-template-columns:1fr; }
  .product-card { display:grid; grid-template-columns:128px 1fr; min-height:170px; }
  .product-image { height:100%; min-height:170px; }
  .product-body { padding:14px; }
  .product-body h2, .product-body h3 { font-size:15px; }
  .product-body p { font-size:10px; min-height:unset; margin-bottom:10px; }
  .product-bottom strong { font-size:12px; }
  .product-bottom > span { display:none; }
  .about-image-wrap { min-height:340px; }
  .building-art, .about-image-wrap > img { min-height:340px; }
  .stat-panel { grid-template-columns:repeat(2,1fr); }
  .why-grid, .why-grid.four { grid-template-columns:1fr 1fr; gap:9px; }
  .why-grid article { padding:18px 10px; }
  .why-grid p { display:none; }
  .service-copy h2 { font-size:30px; }
  .service-mini-grid { grid-template-columns:1fr; }
  .article-grid, .article-page-grid { grid-template-columns:1fr; }
  .article-card { display:grid; grid-template-columns:115px 1fr; }
  .article-image { height:100%; min-height:145px; }
  .article-body { padding:13px; }
  .article-body h2, .article-body h3 { font-size:13px; }
  .article-body p { display:none; }
  .footer-cta-inner { flex-direction:column; align-items:flex-start; justify-content:center; gap:16px; padding-block:35px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px 18px; }
  .footer-brand { grid-column:1/-1; }
  .footer-bottom { flex-direction:column; justify-content:center; padding:14px 0; }
  .page-hero, .compact-hero { min-height:260px; }
  .page-hero h1 { font-size:34px; }
  .catalog-toolbar { flex-direction:column; }
  .catalog-toolbar .btn { width:100%; }
  .main-product-image, .main-product-image img { min-height:310px; height:310px; }
  .product-info-panel h1 { font-size:31px; }
  .detail-actions { flex-direction:column; }
  .detail-actions .btn { width:100%; }
  .form-grid { grid-template-columns:1fr; }
  .contact-form-card, .contact-info-card, .content-card, .spec-card { padding:20px; }
  .article-detail-hero { padding-top:45px; }
  .article-detail-hero h1 { font-size:31px; }
  .article-rich { font-size:13px; }
  .article-rich h2 { font-size:22px; }
  .article-rich h3 { font-size:18px; }
}

/* ========================================================================
   Radman Diesel visual refinement — closer to supplied desktop/mobile refs
   ======================================================================== */
.section-subtitle { margin: 7px 0 0; color: var(--muted); font-size: 12px; }

/* Keep full-page captures and ordinary scrolling visually stable like the ref. */
.site-header { position: relative; top: auto; z-index: 1000; }
.header-inner { max-width: 1360px; }
.brand-mark { border-radius: 5px 1px 5px 1px; transform: skew(-8deg); }
.header-cta { min-height: 44px; border-radius: 9px; }
.desktop-nav a { font-size: 12px; }

.hero-shell {
  min-height: 515px;
  background: #071824;
  border-bottom: 0;
}
.hero-shell::after {
  background:
    linear-gradient(90deg, rgba(5,14,21,.05) 0%, rgba(5,14,21,.18) 43%, rgba(5,14,21,.74) 72%, rgba(5,14,21,.92) 100%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(2,10,15,.28));
}
.hero-media {
  opacity: 1;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: 42% center;
  filter: saturate(.96) contrast(1.02);
}
.hero-grid { min-height: 515px; grid-template-columns: .82fr 1.18fr; gap: 20px; }
.hero-copy { padding: 58px 0; max-width: 570px; position: relative; z-index: 3; }
.hero-copy .hero-kicker { font-size: 9px; letter-spacing: .27em; color: #d7e3eb; }
.hero-copy h1 { font-size: clamp(46px, 5.2vw, 68px); line-height: 1.17; margin-top: 12px; text-shadow: 0 8px 30px rgba(0,0,0,.18); }
.hero-copy h1 strong { color: #fff; }
.hero-copy h1 strong::first-letter { color: var(--primary); }
.hero-copy p { max-width: 510px; font-size: 13px; line-height: 2; margin: 18px 0 23px; color: #d7e0e6; }
.hero-actions .btn { min-height: 44px; border-radius: 9px; padding-inline: 19px; font-size: 12px; }
.hero-points { margin-top: 25px; gap: 19px; font-size: 10px; }
.hero-art { min-height: 1px; }

.benefit-strip { box-shadow: 0 9px 28px rgba(11,31,45,.04); }
.benefit-grid article { padding: 18px 16px; }
.benefit-icon { width: 37px; height: 37px; border-radius: 10px; font-size: 17px; }
.benefit-grid b { font-size: 12px; }
.benefit-grid small { font-size: 9px; }

.products-showcase { padding-top: 72px; padding-bottom: 74px; }
.category-grid { gap: 18px; }
.category-card {
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(20,44,60,.06);
}
.category-visual {
  height: 205px;
  border-radius: 0;
  background: linear-gradient(145deg,#edf3f7,#f8fbfd);
}
.category-visual img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s ease, filter .3s ease;
}
.category-card:hover .category-visual img { transform: scale(1.025); }
.category-copy { padding: 12px 16px 17px; position: relative; z-index: 2; }
.category-card h3 { margin: 0 0 3px; font-size: 16px; }
.category-card p { min-height: 37px; font-size: 10px; line-height: 1.9; padding-left: 22px; }
.category-icon { position: absolute; right: 14px; bottom: 16px; color: #173c58; font-size: 18px; }
.card-arrow { left: 14px; bottom: 14px; font-size: 14px; }
html[data-theme="dark"] .category-visual { background: #122532; }
html[data-theme="dark"] .category-visual img,
html[data-theme="dark"] .product-image img {
  mix-blend-mode: multiply;
  filter: brightness(1.15) contrast(1.12) saturate(.9);
}
html[data-theme="dark"] .category-icon { color: #d3dee6; }

.about-home { padding-block: 70px; }
.about-grid { grid-template-columns: .88fr 1.12fr; gap: 42px; }
.about-copy h2 { font-size: clamp(31px,3.5vw,43px); line-height: 1.5; }
.about-copy .rich-intro, .about-copy p { font-size: 12px; line-height: 2.05; }
.about-image-wrap { min-height: 390px; border-radius: 14px; }
.about-image-wrap > img { min-height: 390px; height: 390px; object-fit: cover; }
.about-image-wrap::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,16,24,.08),rgba(5,16,24,.01) 45%,rgba(5,16,24,.2)); pointer-events:none; }
.about-image-caption { position:absolute; right:26px; bottom:88px; z-index:3; color:#fff; font-size:22px; font-weight:900; line-height:1.45; text-shadow:0 3px 18px rgba(0,0,0,.45); }
.stat-panel { z-index:4; right:14px; left:14px; bottom:14px; border-radius:12px; padding:11px; }
.stat-panel strong { font-size:19px; }
.stat-panel span { font-size:8px; }

.why-section { padding-top: 68px; padding-bottom: 72px; }
.why-grid { gap: 12px; }
.why-grid article { border-radius: 12px; padding: 21px 13px; box-shadow: 0 6px 18px rgba(20,44,60,.05); }
.why-grid article > span { width: 38px; height: 38px; border-radius: 10px; font-size: 17px; }
.why-grid h3 { font-size: 13px; }
.why-grid p { font-size: 9px; line-height: 1.8; }

.partner-band {
  background:
    linear-gradient(90deg, color-mix(in srgb,var(--surface) 96%,transparent), color-mix(in srgb,var(--surface) 82%,transparent)),
    url('../images/radman/cta-road.webp') center/cover no-repeat;
  border-block: 1px solid var(--line);
}
html[data-theme="dark"] .partner-band {
  background:
    linear-gradient(90deg, rgba(7,20,30,.93), rgba(7,20,30,.76)),
    url('../images/radman/cta-road.webp') center/cover no-repeat;
}
.partner-grid { min-height: 260px; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:42px; padding-block:40px; }
.partner-copy h2 { margin:6px 0 8px; font-size:30px; }
.partner-copy > p { color:var(--muted); max-width:650px; margin:0 0 16px; font-size:11px; }
.partner-cards { display:flex; flex-wrap:wrap; gap:8px; }
.partner-cards span { padding:9px 13px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,var(--surface) 86%,transparent); font-size:10px; font-weight:800; }
.partner-quote { margin:0; border:1px solid var(--line); border-radius:13px; background:color-mix(in srgb,var(--surface) 92%,transparent); padding:24px; box-shadow:var(--shadow-sm); position:relative; }
.quote-mark { position:absolute; left:18px; top:3px; font:700 52px Georgia,serif; color:var(--muted); opacity:.55; }
.partner-quote p { margin:0 0 14px; color:var(--text); font-size:12px; line-height:2; }
.partner-quote b, .partner-quote small { display:block; }
.partner-quote b { font-size:11px; }
.partner-quote small { color:var(--muted); font-size:9px; }

.service-band { background:#081925; }
.service-grid { min-height:390px; }
.service-visual { min-height:390px; background:#102736; }
.service-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.service-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,17,25,.1),rgba(5,17,25,.52)); }
.service-visual-caption { position:absolute; right:28px; bottom:25px; z-index:2; color:#fff; font-size:25px; line-height:1.45; text-shadow:0 4px 20px rgba(0,0,0,.5); }
.service-copy { padding:52px 0 52px 48px; }
.service-copy h2 { font-size:34px; }
.service-copy p { font-size:11px; line-height:2; max-width:540px; }
.service-mini-grid article { min-height:58px; border-radius:10px; padding:12px; font-size:11px; }

.articles-home { padding-block:72px; }
.article-card { border-radius:12px; }
.article-image { height:180px; }
.article-body { padding:14px 15px 16px; }
.article-body h2, .article-body h3 { font-size:14px; }
.article-body p { font-size:10px; min-height:40px; }

.footer-cta {
  position:relative;
  background:
    linear-gradient(90deg,rgba(7,20,30,.88),rgba(7,20,30,.40)),
    url('../images/radman/cta-road.webp') center 52%/cover no-repeat;
}
.footer-cta-inner { min-height:246px; }
.footer-cta h2 { font-size:27px; }
.footer-cta p { font-size:10px; }

/* Inner page photo heroes */
.catalog-page-hero,
.about-page-hero {
  background-image:linear-gradient(90deg,rgba(6,18,27,.28),rgba(6,18,27,.90)),var(--page-image);
  background-size:cover;
  background-position:center;
}
.catalog-page-hero::after,
.about-page-hero::after { background:linear-gradient(90deg,rgba(6,18,27,.02),rgba(6,18,27,.52)); }
.catalog-page-hero > .container,
.about-page-hero > .container { position:relative; z-index:3; }
.product-image, .main-product-image { background:#f4f7f9; }
.product-image img { object-fit:cover; }
.main-product-image img { object-fit:contain; background:#f7f9fb; }
html[data-theme="dark"] .main-product-image img { background:#102431; }

@media (max-width: 900px) {
  .site-header { position:relative; }
  .hero-shell, .hero-grid { min-height:620px; }
  .hero-media { background-position:32% center; }
  .hero-shell::after { background:linear-gradient(180deg,rgba(5,14,21,.73),rgba(5,14,21,.16) 55%,rgba(5,14,21,.48)); }
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { padding:45px 0 20px; max-width:620px; margin-inline:auto; text-align:center; }
  .hero-copy h1 { font-size:50px; }
  .hero-copy .eyebrow, .hero-actions, .hero-points { justify-content:center; }
  .hero-art { min-height:225px; }
  .about-grid, .partner-grid { grid-template-columns:1fr; }
  .about-copy { order:0; }
  .partner-grid { gap:18px; }
  .service-grid { grid-template-columns:1fr; }
  .service-visual { min-height:320px; margin:0; }
  .service-copy { padding:42px 0; }
}

@media (max-width: 620px) {
  .hero-shell, .hero-grid { min-height:590px; }
  .hero-media { background-position:31% center; }
  .hero-copy { text-align:right; padding-top:34px; margin:0; }
  .hero-copy .hero-kicker, .hero-actions, .hero-points { justify-content:flex-start; }
  .hero-copy h1 { font-size:38px; }
  .hero-copy p { max-width:88%; font-size:11px; }
  .hero-actions { width:min(330px,100%); margin:0; }
  .hero-actions .btn { width:100%; }
  .hero-art { min-height:200px; }
  .benefit-grid { grid-template-columns:repeat(2,1fr); }
  .benefit-grid article { min-height:76px; }
  .category-card { grid-template-columns:126px 1fr; min-height:118px; padding:0; }
  .category-visual { height:118px; border-radius:0; }
  .category-copy { padding:12px 11px 12px 8px; }
  .category-card h3 { font-size:14px; }
  .category-card p { font-size:9px; padding-left:12px; }
  .category-icon { display:none; }
  .about-image-wrap, .about-image-wrap > img { min-height:300px; height:300px; }
  .about-image-caption { font-size:18px; bottom:96px; right:18px; }
  .why-grid article { min-height:112px; }
  .partner-grid { padding-block:30px; }
  .partner-copy h2 { font-size:25px; }
  .partner-cards { display:grid; grid-template-columns:repeat(2,1fr); }
  .partner-cards span { text-align:center; padding-inline:6px; }
  .service-visual { min-height:260px; }
  .service-visual-caption { right:18px; bottom:16px; font-size:21px; }
  .footer-cta-inner { min-height:286px; }
}

/* ==========================================================================\n   Refinements - 2026-09-14\n   ========================================================================== */

/* Keep all interactive controls on the same Persian typeface. */
body, button, input, textarea, select {
  font-family: var(--font-fa);
}

/* Product/category media must remain readable in dark mode. The previous
   multiply blend crushed the white studio images into near-black cards. */
.category-visual,
.product-image {
  isolation: isolate;
}

html[data-theme="dark"] .category-card,
html[data-theme="dark"] .product-card {
  background: #0d202d;
  border-color: #1f3a4a;
  box-shadow: 0 9px 26px rgba(0,0,0,.22);
}

html[data-theme="dark"] .category-visual,
html[data-theme="dark"] .product-image {
  background: linear-gradient(145deg, #dfe6ea 0%, #cfd9df 100%);
}

html[data-theme="dark"] .category-visual::after,
html[data-theme="dark"] .product-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(180deg, rgba(5,18,27,.02), rgba(5,18,27,.12));
}

html[data-theme="dark"] .category-visual img,
html[data-theme="dark"] .product-image img {
  position: relative;
  z-index: 1;
  mix-blend-mode: normal;
  filter: brightness(.82) contrast(1.07) saturate(.92);
}

html[data-theme="dark"] .category-card:hover .category-visual img,
html[data-theme="dark"] .product-card:hover .product-image img {
  filter: brightness(.88) contrast(1.08) saturate(.98);
}

html[data-theme="dark"] .category-copy,
html[data-theme="dark"] .product-body {
  background: #0d202d;
}

html[data-theme="dark"] .category-card h3,
html[data-theme="dark"] .product-body h2,
html[data-theme="dark"] .product-body h3,
html[data-theme="dark"] .product-bottom strong {
  color: #f3f7fa;
}

html[data-theme="dark"] .category-card p,
html[data-theme="dark"] .product-body p,
html[data-theme="dark"] .product-meta span,
html[data-theme="dark"] .product-bottom strong small {
  color: #9fb0bc;
}

html[data-theme="dark"] .category-icon {
  color: #dfe8ee;
}

/* Keep detail-page product photography clean instead of tinting white products. */
html[data-theme="dark"] .main-product-image {
  background: #0d202d;
}
html[data-theme="dark"] .main-product-image img {
  background: #dce4e9;
  filter: brightness(.83) contrast(1.05);
}

/* Dark-mode hierarchy and separators closer to the supplied reference. */
html[data-theme="dark"] .benefit-strip,
html[data-theme="dark"] .section-tint {
  border-color: #193140;
}
html[data-theme="dark"] .benefit-grid article + article {
  border-color: #193140;
}
html[data-theme="dark"] .why-grid article,
html[data-theme="dark"] .accordion-list details,
html[data-theme="dark"] .article-card {
  border-color: #1d3747;
}
html[data-theme="dark"] .why-grid article {
  background: #0c1e2a;
}
html[data-theme="dark"] .accordion-list details {
  background: #0b1d29;
}

/* Slightly stronger content typography; Tahoma made the layout look too thin
   and undersized compared with the target composition. */
.desktop-nav a { font-size: 13.5px; font-weight: 800; }
.section-subtitle { font-size: 12px; }
.category-card h3 { font-weight: 900; }
.category-card p { font-weight: 500; }
.article-body h2, .article-body h3 { font-weight: 900; }

@media (max-width: 620px) {
  html[data-theme="dark"] .category-visual,
  html[data-theme="dark"] .product-image {
    background: linear-gradient(145deg, #dce4e8, #cbd6dc);
  }
  html[data-theme="dark"] .category-visual img,
  html[data-theme="dark"] .product-image img {
    filter: brightness(.86) contrast(1.05) saturate(.94);
  }
}

/* ========================================================================
   Dedicated consultation + after-sales pages
   ======================================================================== */
.request-page-hero {
  min-height: 445px;
  background:
    linear-gradient(90deg, rgba(5,17,26,.30) 0%, rgba(5,17,26,.50) 45%, rgba(5,17,26,.93) 100%),
    var(--request-hero) center/cover no-repeat;
}
.request-page-hero::after {
  background:
    radial-gradient(circle at 17% 30%, rgba(255,255,255,.10), transparent 29%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(2,10,15,.25));
}
.request-hero-grid {
  min-height: 445px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 3;
  padding-block: 54px;
}
.request-hero-grid > div:first-child { max-width: 660px; }
.request-page-hero h1 { margin: 10px 0 14px; font-size: clamp(42px,5vw,62px); line-height: 1.35; }
.request-page-hero p { margin: 0; max-width: 650px; font-size: 14px; line-height: 2.05; }
.request-hero-points { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 24px; }
.request-hero-points span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(6,18,27,.28); color: #d9e4eb; font-size: 10px; font-weight: 700; backdrop-filter: blur(8px); }
.request-hero-points span::before { content: ""; width: 5px; height: 5px; display: inline-block; border-radius: 50%; background: var(--primary); margin-left: 7px; }
.request-hero-card,
.service-hero-badge { justify-self: end; width: min(360px,100%); border: 1px solid rgba(255,255,255,.16); background: rgba(7,21,31,.74); backdrop-filter: blur(14px); border-radius: 18px; padding: 22px; box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.request-hero-card > b { display: block; margin-bottom: 14px; font-size: 15px; }
.request-hero-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.request-hero-mini-grid span { min-height: 48px; display: grid; place-items: center; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.06); color: #d8e3ea; font-size: 10px; text-align: center; }
.service-hero-badge { min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; border-right: 3px solid var(--primary); }
.service-hero-badge strong { direction: ltr; letter-spacing: .16em; font: 800 27px/1.2 Arial,sans-serif; }
.service-hero-badge span { color: #bccad3; font-size: 11px; margin-top: 12px; }

.request-intro-section { padding-block: 42px; }
.request-benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.request-benefit-grid article { display: flex; align-items: flex-start; gap: 14px; padding: 21px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm); }
.request-benefit-grid article > span { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: var(--primary-soft); color: var(--primary); font-weight: 900; font-size: 11px; }
.request-benefit-grid h3 { margin: 0 0 3px; font-size: 15px; }
.request-benefit-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.9; }

.request-form-section { padding-block: 76px; }
.request-layout { display: grid; grid-template-columns: 1.18fr .82fr; gap: 24px; align-items: start; }
.request-form-card { padding: 34px; }
.request-form-card h2 { margin: 6px 0 4px; font-size: 30px; }
.form-intro { margin: 0 0 22px; color: var(--muted); font-size: 11px; max-width: 720px; }
.request-form-card select,
.request-form-card input,
.request-form-card textarea { width: 100%; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 11px; padding: 11px 13px; outline: 0; transition: .2s ease; }
.request-form-card input,
.request-form-card select { height: 49px; }
.request-form-card select { appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position: 16px 21px,11px 21px; background-size: 5px 5px,5px 5px; background-repeat: no-repeat; padding-left: 32px; }
.request-form-card input:focus,
.request-form-card select:focus,
.request-form-card textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent); }
.request-form-card label > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.request-submit { margin-top: 3px; min-width: 210px; }
.form-privacy-note { display: block; color: var(--muted); font-size: 9px; margin-top: -3px; }
.form-general-error { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb,var(--primary) 10%,var(--surface)); color: var(--primary); font-size: 10px; }

.request-side-card { position: sticky; top: 24px; border-radius: 18px; padding: 30px; background: var(--navy); color: #fff; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 45px rgba(0,0,0,.13); }
.request-side-card h2 { font-size: 27px; line-height: 1.55; margin: 7px 0 10px; }
.request-side-card > p { color: #aebec9; font-size: 11px; margin: 0 0 19px; }
.request-side-list { display: flex; flex-direction: column; gap: 9px; }
.request-side-list > div { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.035); }
.request-side-list > div > span { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: rgba(229,31,43,.13); color: #ff4350; font-size: 12px; font-weight: 900; }
.request-side-list p { margin: 0; line-height: 1.55; }
.request-side-list b { display: block; font-size: 11px; }
.request-side-list small { display: block; color: #91a5b2; font-size: 9px; margin-top: 4px; }
.request-contact-box { margin-top: 18px; padding: 15px; border-radius: 12px; background: rgba(255,255,255,.055); }
.request-contact-box small { display: block; color: #91a5b2; font-size: 9px; margin-bottom: 5px; }
.request-contact-box a { display: block; direction: ltr; text-align: right; font-weight: 800; font-size: 12px; margin: 3px 0; }
.request-contact-box span { display: block; color: #b8c6cf; font-size: 10px; margin-top: 4px; }

.request-closing-section { padding-block: 52px; }
.request-closing-card { display: flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid var(--line); border-radius: 18px; padding: 28px 32px; background: var(--surface); box-shadow: var(--shadow-sm); }
.request-closing-card h2 { margin: 5px 0 0; font-size: 23px; }

.service-page-services { padding-block: 76px; }
.service-page-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 30px; }
.service-page-grid article { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow-sm); transition: .2s ease; }
.service-page-grid article:hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--primary) 38%,var(--line)); }
.service-page-grid article > span { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 11px; background: var(--primary-soft); color: var(--primary); font-size: 18px; }
.service-page-grid h3 { margin: 14px 0 5px; font-size: 16px; }
.service-page-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.9; }

.service-process-section { padding-block: 76px; }
.service-process-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 38px; align-items: center; }
.service-process-copy h2 { font-size: 32px; margin: 7px 0 9px; }
.service-process-copy > p { color: var(--muted); font-size: 11px; }
.process-list { list-style: none; counter-reset: service-step; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.process-list li { counter-increment: service-step; position: relative; padding: 13px 53px 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.process-list li::before { content: counter(service-step, decimal-leading-zero); position: absolute; right: 12px; top: 12px; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: 9px; font-weight: 900; }
.process-list b { display: block; font-size: 12px; }
.process-list span { display: block; color: var(--muted); font-size: 9px; margin-top: 2px; }
.service-process-media { min-height: 410px; position: relative; overflow: hidden; border-radius: 18px; box-shadow: var(--shadow); }
.service-process-media img { width: 100%; height: 410px; object-fit: cover; }
.service-process-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 48%,rgba(4,14,21,.72)); }
.service-process-media > div { position: absolute; z-index: 2; right: 24px; bottom: 22px; color: #fff; }
.service-process-media b { display: block; font-size: 22px; }
.service-process-media span { color: #d4e0e7; font-size: 10px; }
.service-faq-section { padding-block: 70px; }
.service-more-btn { margin-top: 18px; }

html[data-theme="dark"] .request-benefit-grid article,
html[data-theme="dark"] .service-page-grid article,
html[data-theme="dark"] .request-closing-card { background: #0c1d29; border-color: #203847; }
html[data-theme="dark"] .request-form-card { background: #0c1d29; }
html[data-theme="dark"] .request-form-card input,
html[data-theme="dark"] .request-form-card select,
html[data-theme="dark"] .request-form-card textarea { background: #102633; border-color: #223d4d; }

@media (max-width: 900px) {
  .request-hero-grid { grid-template-columns: 1fr; gap: 22px; align-content: center; }
  .request-hero-card, .service-hero-badge { justify-self: start; width: min(430px,100%); }
  .request-layout, .service-process-grid { grid-template-columns: 1fr; }
  .request-side-card { position: static; }
  .service-page-grid { grid-template-columns: repeat(2,1fr); }
  .request-benefit-grid { grid-template-columns: 1fr; }
  .service-process-media { order: -1; min-height: 330px; }
  .service-process-media img { height: 330px; }
}

@media (max-width: 620px) {
  .request-page-hero { min-height: 510px; background-position: 43% center; }
  .request-hero-grid { min-height: 510px; padding-block: 38px; }
  .request-page-hero h1 { font-size: 37px; }
  .request-page-hero p { font-size: 11px; }
  .request-hero-points { gap: 6px; }
  .request-hero-points span { font-size: 8px; padding: 5px 8px; }
  .request-hero-card { padding: 15px; }
  .request-hero-mini-grid { grid-template-columns: 1fr 1fr; }
  .request-hero-mini-grid span { min-height: 40px; font-size: 8px; }
  .service-hero-badge { min-height: 118px; padding: 16px; }
  .service-hero-badge strong { font-size: 21px; }
  .request-form-section, .service-page-services, .service-process-section { padding-block: 54px; }
  .request-form-card, .request-side-card { padding: 20px; }
  .request-form-card h2, .request-side-card h2 { font-size: 25px; }
  .request-submit { width: 100%; }
  .service-page-grid { grid-template-columns: 1fr; }
  .service-page-grid article { padding: 19px; }
  .request-closing-card { align-items: stretch; flex-direction: column; padding: 22px; }
  .request-closing-card h2 { font-size: 19px; }
  .request-closing-card .btn { width: 100%; }
  .service-process-media { min-height: 270px; }
  .service-process-media img { height: 270px; }
  .service-process-copy h2 { font-size: 27px; }
}

/* Keep grouped catalog prices readable inside RTL layouts. */
.price-number { direction:ltr; unicode-bidi:isolate; display:inline-block; font-variant-numeric:tabular-nums; }

/* ========================================================================
   Homepage fidelity pass — 2026-09-15
   Rebuilds the homepage composition to track the supplied Radman references
   more closely while preserving dynamic Django content and light/dark modes.
   ======================================================================== */

/* Header: slimmer, cleaner and more like the supplied reference. */
.site-header {
  height: 72px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  border-bottom-color: color-mix(in srgb, var(--line) 88%, transparent);
  box-shadow: 0 4px 18px rgba(15,42,59,.035);
}
.header-inner { width: min(1330px, calc(100% - 46px)); gap: 24px; }
.brand { gap: 8px; }
.brand-mark { width: 40px; height: 40px; font-size: 25px; box-shadow: none; }
.brand-copy b { font-size: 17px; font-weight: 900; }
.brand-copy small { font-size: 7.5px; letter-spacing: .12em; }
.desktop-nav { gap: 8px; }
.desktop-nav a { padding-inline: 10px; font-size: 12px; color: color-mix(in srgb,var(--text) 77%,var(--muted)); }
.desktop-nav a.active::after, .desktop-nav a:hover::after { inset-inline: 9px; height: 2px; }
.header-actions { gap: 8px; }
.header-cta { min-height: 42px; padding: 8px 18px; border-radius: 8px; font-size: 11px; }
.theme-toggle { width: 38px; height: 38px; border-radius: 8px; }

/* Shared line icon treatment. */
.benefit-icon svg,
.category-line-icon svg,
.why-grid article > span svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hero: bright, airy right side in light mode; cinematic in dark mode. */
.home-hero { min-height: 472px; background: #eef4f8; color: #102a43; }
.home-hero .hero-media {
  opacity: 1;
  filter: brightness(1.12) saturate(.95) contrast(.96);
  background-position: 37% 49%;
}
.home-hero::after {
  background:
    linear-gradient(90deg, rgba(244,249,252,.03) 0%, rgba(244,249,252,.05) 35%, rgba(246,250,253,.72) 66%, rgba(248,251,253,.98) 100%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(227,237,244,.09));
}
.home-hero .hero-grid {
  min-height: 472px;
  grid-template-columns: minmax(0, .90fr) minmax(0, 1.10fr);
  align-items: center;
  padding-inline: 4px;
}
.home-hero .hero-copy {
  max-width: 585px;
  padding: 48px 0 50px;
  color: #102a43;
}
.home-hero .hero-copy .hero-kicker { color: #506778; font-size: 9px; letter-spacing: .23em; }
.home-hero .hero-copy h1 { font-size: clamp(43px,4.8vw,64px); line-height: 1.12; color: #102a43; text-shadow: none; }
.home-hero .hero-copy h1 strong { color: #0e2c48; font-style: normal; }
.home-hero .hero-copy h1 strong em { color: var(--primary); font-style: normal; }
.home-hero .hero-copy h1 strong::first-letter { color: inherit; }
.home-hero .hero-copy p { color: #425b6e; max-width: 545px; font-size: 12.5px; margin: 16px 0 22px; line-height: 2.05; }
.home-hero .hero-shell .btn-outline,
.home-hero .btn-outline { color: #18364e; border-color: #aebdca; background: rgba(255,255,255,.74); }
.home-hero .hero-points { color: #536b7d; margin-top: 22px; font-size: 9px; }
.home-hero .hero-art { min-height: 1px; }
.hero-side-values {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-inline-start: 20px;
  border-inline-start: 1px solid rgba(20,52,74,.14);
  color: #455f72;
  font-size: 11px;
  font-weight: 800;
}

html[data-theme="dark"] .home-hero { background: #06141e; color: #fff; }
html[data-theme="dark"] .home-hero .hero-media { filter: brightness(.76) saturate(.95) contrast(1.08); background-position: 37% 49%; }
html[data-theme="dark"] .home-hero::after {
  background:
    linear-gradient(90deg, rgba(3,12,18,.04) 0%, rgba(3,12,18,.18) 38%, rgba(4,15,22,.68) 68%, rgba(4,15,22,.95) 100%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.18));
}
html[data-theme="dark"] .home-hero .hero-copy,
html[data-theme="dark"] .home-hero .hero-copy h1,
html[data-theme="dark"] .home-hero .hero-copy h1 strong { color: #fff; }
html[data-theme="dark"] .home-hero .hero-copy .hero-kicker { color: #cbd8e1; }
html[data-theme="dark"] .home-hero .hero-copy p { color: #c6d3dc; }
html[data-theme="dark"] .home-hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(4,13,20,.3); }
html[data-theme="dark"] .home-hero .hero-points,
html[data-theme="dark"] .hero-side-values { color: #c6d3dc; }
html[data-theme="dark"] .hero-side-values { border-inline-start-color: rgba(255,255,255,.18); }

/* Feature strip immediately beneath hero. */
.benefit-strip { background: var(--surface); }
.benefit-grid article { min-height: 72px; padding: 13px 18px; gap: 11px; }
.benefit-icon { width: 38px; height: 38px; border-radius: 50%; background: transparent; color: var(--primary); }
.benefit-grid b { font-size: 12px; font-weight: 900; }
.benefit-grid small { font-size: 9px; margin-top: 0; }

/* Products: lower, wider cards with clean imagery in light and scenic backdrop in dark. */
.products-showcase { padding-block: 56px 62px; }
.product-section-head { margin-bottom: 24px; }
.product-section-head h2 { font-size: clamp(25px,2.7vw,34px); }
.category-grid { gap: 14px; }
.category-card {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20,44,60,.065);
  background: var(--surface);
}
.category-visual {
  height: 170px;
  position: relative;
  background:
    linear-gradient(180deg,rgba(242,247,250,.45),rgba(227,237,243,.85)),
    url('../images/radman/cta-road.webp') center 58%/cover no-repeat;
}
.category-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(232,241,246,.15));
}
.category-visual img {
  position: relative;
  z-index: 1;
  width: 96%;
  height: 96%;
  margin: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(16,39,55,.15));
}
.category-copy { padding: 10px 13px 13px; }
.category-title-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.category-title-row h3 { margin:0; }
.category-line-icon { color:#173e61; display:grid; place-items:center; }
.category-card p { padding-left: 20px; min-height: 30px; font-size: 9.5px; line-height:1.7; }
.card-arrow { left: 11px; bottom: 11px; font-size: 12px; }
html[data-theme="dark"] .category-card { background:#0b1d29; border-color:#213846; }
html[data-theme="dark"] .category-visual {
  background:
    linear-gradient(180deg,rgba(5,18,27,.36),rgba(5,18,27,.65)),
    url('../images/radman/cta-road.webp') center 57%/cover no-repeat;
}
html[data-theme="dark"] .category-visual::before { background: linear-gradient(180deg,rgba(4,16,24,.02),rgba(4,16,24,.3)); }
html[data-theme="dark"] .category-visual img { filter: brightness(.92) contrast(1.05) drop-shadow(0 10px 18px rgba(0,0,0,.38)); }
html[data-theme="dark"] .category-line-icon { color:#e7eef3; }

/* About: three-column composition exactly like the reference: copy, image, stats. */
.about-home { padding-block: 56px; }
.about-reference-grid {
  display: grid;
  grid-template-columns: minmax(280px,.96fr) minmax(430px,1.35fr) minmax(185px,.54fr);
  gap: 16px;
  align-items: stretch;
}
.about-reference-grid .about-copy { display:flex; flex-direction:column; justify-content:center; padding: 10px 12px 10px 0; }
.about-reference-grid .about-copy h2 { font-size: clamp(27px,3vw,38px); line-height:1.42; margin:7px 0 11px; }
.about-reference-grid .about-copy .rich-intro,
.about-reference-grid .about-copy p { margin:0 0 18px; font-size:11px; line-height:2.1; }
.about-more { align-self:flex-start; min-height:42px; font-size:10px; }
.about-reference-grid .about-image-wrap { min-height: 330px; height: 330px; border-radius: 8px; box-shadow:none; }
.about-reference-grid .about-image-wrap > img { min-height:330px; height:330px; object-fit:cover; }
.about-reference-grid .about-image-caption { right:24px; bottom:27px; font-size:21px; line-height:1.4; }
.about-stat-list {
  display:grid;
  grid-template-rows: repeat(4,1fr);
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  overflow:hidden;
}
.about-stat-list > div {
  min-height: 78px;
  display:grid;
  grid-template-columns:36px 1fr;
  grid-template-rows:auto auto;
  column-gap:8px;
  align-content:center;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.about-stat-list > div:last-child { border-bottom:0; }
.about-stat-list .stat-icon { grid-row:1/3; align-self:center; color:#173e61; font-size:22px; text-align:center; }
.about-stat-list strong { font-size:18px; line-height:1.2; direction:ltr; text-align:right; }
.about-stat-list small { color:var(--muted); font-size:8.5px; }
html[data-theme="dark"] .about-stat-list { background:#0b1d29; border-color:#213846; }
html[data-theme="dark"] .about-stat-list > div { border-bottom-color:#213846; }
html[data-theme="dark"] .about-stat-list .stat-icon { color:#e5edf2; }

/* Why section: heading on the right, compact feature row. */
.why-section { padding-block: 42px 50px; }
.why-head { margin-bottom: 16px; text-align:right; }
.why-head h2 { font-size: 21px; margin-top:3px; }
.why-grid { gap:10px; }
.why-grid article { padding:17px 10px; border-radius:8px; min-height:134px; }
.why-grid article > span { width:38px; height:38px; margin-bottom:8px; background:transparent; }
.why-grid h3 { font-size:12px; margin:2px 0; }
.why-grid p { font-size:8.5px; line-height:1.7; }

/* Partner/client strip: logo row plus quote card, against mountain road. */
.partner-band {
  background:
    linear-gradient(90deg,rgba(244,248,251,.95),rgba(244,248,251,.50)),
    url('../images/radman/cta-road.webp') center 53%/cover no-repeat;
}
.partner-reference-grid { min-height:220px; display:grid; grid-template-columns:1.45fr .72fr; align-items:center; gap:24px; padding-block:24px; }
.partner-heading h2 { margin:0; font-size:23px; }
.partner-heading p { margin:1px 0 12px; color:var(--muted); font-size:10px; }
.partner-logo-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.partner-logo-grid span {
  min-height:78px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border:1px solid var(--line);
  border-radius:7px;
  background:rgba(255,255,255,.82);
  color:#27445a;
}
.partner-logo-grid b { font-size:13px; }
.partner-logo-grid small { font-size:6.5px; color:#7c8c98; direction:ltr; }
.partner-reference-grid .partner-quote { padding:20px 23px; border-radius:8px; background:rgba(255,255,255,.89); }
.partner-reference-grid .partner-quote p { font-size:10px; line-height:1.9; }
html[data-theme="dark"] .partner-band {
  background:
    linear-gradient(90deg,rgba(4,16,24,.93),rgba(4,16,24,.64)),
    url('../images/radman/cta-road.webp') center 53%/cover no-repeat;
}
html[data-theme="dark"] .partner-logo-grid span,
html[data-theme="dark"] .partner-reference-grid .partner-quote { background:rgba(8,27,39,.88); border-color:#294252; color:#e8eef2; }

/* Service: image on the LEFT, copy on the RIGHT as in the reference. */
.service-band { background:#081824; }
.service-reference-grid {
  display:grid;
  grid-template-columns: minmax(0,.94fr) minmax(0,1.12fr);
  min-height: 350px;
  direction: rtl;
}
.service-reference-grid .service-copy { padding:44px 0 44px 38px; direction:rtl; }
.service-reference-grid .service-copy h2 { font-size:31px; margin:4px 0 9px; }
.service-reference-grid .service-copy p { margin:0; max-width:580px; }
.service-reference-grid .service-visual {
  min-height:350px;
  margin-left: calc((100vw - min(var(--container), calc(100vw - 40px))) / -2);
  margin-right: 0;
  direction:ltr;
}
.service-reference-grid .service-visual::after { background:linear-gradient(90deg,rgba(5,17,25,.35),rgba(5,17,25,.06) 55%,rgba(5,17,25,.15)); }
.service-reference-grid .service-visual-caption { right:auto; left:28px; bottom:28px; text-align:right; }
.service-reference-grid .service-visual-caption b { display:block; font-size:23px; }
.service-reference-grid .service-visual-caption small { display:block; margin-top:3px; color:#d2dce2; font-size:9px; }
.service-mini-row { grid-template-columns:repeat(4,1fr); gap:8px; }
.service-mini-row article { min-height:64px; justify-content:center; flex-direction:column; text-align:center; gap:2px; padding:8px 6px; }
.service-mini-row article span { font-size:17px; }
.service-mini-row article b { font-size:9px; }
.service-more-btn { margin-top:16px; align-self:flex-start; border-color:rgba(255,255,255,.22); color:#fff; background:rgba(255,255,255,.03); }

/* Articles: promo card on the right + three compact cards. */
.articles-home { padding-block:56px 62px; }
.article-reference-grid { display:grid; grid-template-columns:.68fr 2.32fr; gap:14px; align-items:stretch; }
.article-reference-grid .article-grid { grid-template-columns:repeat(3,1fr); gap:12px; }
.article-reference-grid .article-card { border-radius:8px; }
.article-reference-grid .article-image { height:132px; }
.article-reference-grid .article-body { padding:10px 12px 12px; }
.article-reference-grid .article-body h3 { font-size:11.5px; line-height:1.65; margin:3px 0 5px; min-height:38px; }
.article-reference-grid .article-body p { display:none; }
.article-reference-grid .article-body small,
.article-reference-grid .article-body > span { font-size:8px; }
.article-promo-card {
  min-height: 100%;
  position:relative;
  overflow:hidden;
  border-radius:8px;
  background:
    linear-gradient(90deg,rgba(241,247,251,.96),rgba(241,247,251,.66),rgba(241,247,251,.08)),
    var(--promo-image) 26% center/cover no-repeat;
  border:1px solid var(--line);
}
.article-promo-card > div { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:22px; }
.article-promo-card span { color:#112c44; font-size:12px; font-weight:800; }
.article-promo-card strong { color:#112c44; font-size:24px; line-height:1.3; }
.article-promo-card i { width:25px; height:3px; background:var(--primary); margin-top:9px; }
html[data-theme="dark"] .article-promo-card {
  background:
    linear-gradient(90deg,rgba(5,18,27,.95),rgba(5,18,27,.70),rgba(5,18,27,.18)),
    var(--promo-image) 26% center/cover no-repeat;
  border-color:#203847;
}
html[data-theme="dark"] .article-promo-card span,
html[data-theme="dark"] .article-promo-card strong { color:#f1f6f9; }

/* Footer CTA and footer proportions. */
.footer-cta {
  background:
    linear-gradient(90deg,rgba(7,20,30,.80),rgba(7,20,30,.32)),
    url('../images/radman/cta-road.webp') center 57%/cover no-repeat;
}
.footer-cta-inner { min-height:200px; display:grid; grid-template-columns:1fr auto .88fr; align-items:center; gap:28px; }
.footer-cta-copy h2 { font-size:22px; margin:0; }
.footer-cta-copy p { margin:0; }
.footer-cta-slogan { color:#fff; text-align:left; display:flex; flex-direction:column; line-height:1.35; }
.footer-cta-slogan b { font-size:13px; }
.footer-cta-slogan span { font-size:11px; color:#d3dde3; }
.footer-cta-slogan small { direction:ltr; letter-spacing:.14em; margin-top:5px; font-size:7px; }
.footer-grid { grid-template-columns:1.05fr .72fr 1.05fr .72fr .85fr; gap:26px; padding:36px 0 25px; }
.footer-brand p { font-size:10px; color:var(--muted); }
.footer-future { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; color:var(--muted); }
.footer-future span { font-size:10px; }
.footer-future b { color:var(--text); font-size:16px; }
.footer-future i { font-style:normal; font-size:54px; opacity:.16; line-height:.85; transform:rotate(-5deg); }
.footer-bottom { padding-block:12px; font-size:8px; }

/* Keep catalog images readable now that seeded images include alpha. */
.product-image {
  background:
    linear-gradient(180deg,rgba(243,247,249,.7),rgba(228,237,242,.9)),
    url('../images/radman/cta-road.webp') center 58%/cover no-repeat;
}
.product-image img { object-fit:contain; padding:7px; filter:drop-shadow(0 10px 14px rgba(15,38,54,.12)); }
html[data-theme="dark"] .product-image {
  background:
    linear-gradient(180deg,rgba(7,21,31,.42),rgba(7,21,31,.66)),
    url('../images/radman/cta-road.webp') center 58%/cover no-repeat;
}
html[data-theme="dark"] .product-image img { filter:brightness(.94) contrast(1.03) drop-shadow(0 10px 18px rgba(0,0,0,.42)); }

@media (max-width: 1120px) {
  .hero-side-values { display:none; }
  .about-reference-grid { grid-template-columns:1fr 1.45fr; }
  .about-stat-list { grid-column:1/-1; grid-template-columns:repeat(4,1fr); grid-template-rows:1fr; }
  .about-stat-list > div { border-bottom:0; border-left:1px solid var(--line); }
  .about-stat-list > div:last-child { border-left:0; }
  .partner-logo-grid { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr 1fr 1fr; }
  .footer-future { display:none; }
}

@media (max-width: 900px) {
  .site-header { height:68px; }
  .home-hero, .home-hero .hero-grid { min-height:610px; }
  .home-hero .hero-media { background-position:31% center; }
  .home-hero::after { background:linear-gradient(180deg,rgba(247,250,252,.83),rgba(247,250,252,.36) 50%,rgba(7,20,30,.08)); }
  .home-hero .hero-grid { grid-template-columns:1fr; align-items:start; }
  .home-hero .hero-copy { max-width:610px; padding:38px 0 0; text-align:right; margin:0; }
  .home-hero .hero-copy .eyebrow,
  .home-hero .hero-actions,
  .home-hero .hero-points { justify-content:flex-start; }
  .home-hero .hero-art { min-height:250px; }
  html[data-theme="dark"] .home-hero::after { background:linear-gradient(180deg,rgba(4,15,22,.78),rgba(4,15,22,.28) 54%,rgba(4,15,22,.30)); }
  .about-reference-grid { grid-template-columns:1fr; }
  .about-reference-grid .about-copy { order:1; }
  .about-reference-grid .about-image-wrap { order:2; }
  .about-stat-list { order:3; grid-column:auto; }
  .partner-reference-grid { grid-template-columns:1fr; }
  .service-reference-grid { grid-template-columns:1fr; }
  .service-reference-grid .service-copy { order:1; padding:36px 0; }
  .service-reference-grid .service-visual { order:2; min-height:310px; margin:0; }
  .article-reference-grid { grid-template-columns:1fr; }
  .article-promo-card { min-height:190px; }
  .footer-cta-inner { grid-template-columns:1fr auto; }
  .footer-cta-slogan { display:none; }
}

@media (max-width: 620px) {
  .header-inner { width:calc(100% - 22px); gap:10px; }
  .home-hero, .home-hero .hero-grid { min-height:690px; }
  .home-hero .hero-media { background-position:24% center; }
  .home-hero::after { background:linear-gradient(180deg,rgba(246,250,252,.93) 0%,rgba(246,250,252,.74) 38%,rgba(246,250,252,.08) 70%,rgba(5,16,24,.12)); }
  html[data-theme="dark"] .home-hero::after { background:linear-gradient(180deg,rgba(4,15,22,.87) 0%,rgba(4,15,22,.69) 39%,rgba(4,15,22,.11) 72%,rgba(4,15,22,.22)); }
  .home-hero .hero-copy { padding-top:28px; }
  .home-hero .hero-copy h1 { font-size:34px; }
  .home-hero .hero-copy p { max-width:95%; font-size:10.5px; margin:12px 0 16px; }
  .home-hero .hero-actions { width:min(285px,100%); }
  .home-hero .hero-actions .btn { min-height:42px; }
  .home-hero .hero-points { display:none; }
  .benefit-grid article { min-height:68px; }
  .benefit-grid b { font-size:10px; }
  .benefit-grid small { font-size:7.5px; }
  .benefit-icon { width:31px; height:31px; }
  .benefit-icon svg { width:20px; height:20px; }
  .products-showcase { padding-block:45px 50px; }
  .category-grid { gap:10px; }
  .category-card { grid-template-columns:112px 1fr; min-height:108px; }
  .category-visual { height:108px; }
  .category-visual img { width:100%; height:100%; padding:2px; }
  .category-copy { padding:10px 10px 10px 7px; }
  .category-title-row h3 { font-size:13px; }
  .category-line-icon { display:none; }
  .category-card p { font-size:8.5px; }
  .about-reference-grid .about-copy { padding-right:0; }
  .about-reference-grid .about-image-wrap,
  .about-reference-grid .about-image-wrap > img { height:280px; min-height:280px; }
  .about-stat-list { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
  .about-stat-list > div { border-left:1px solid var(--line); border-bottom:1px solid var(--line); }
  .about-stat-list > div:nth-child(even) { border-left:0; }
  .about-stat-list > div:nth-child(n+3) { border-bottom:0; }
  .why-grid { grid-template-columns:1fr 1fr; }
  .why-grid article { min-height:110px; }
  .why-grid article:nth-child(5) { grid-column:1/-1; }
  .partner-logo-grid { grid-template-columns:repeat(3,1fr); }
  .partner-logo-grid span { min-height:60px; }
  .partner-reference-grid .partner-quote { padding:16px; }
  .service-reference-grid .service-copy { padding:30px 0; }
  .service-mini-row { grid-template-columns:1fr 1fr; }
  .service-reference-grid .service-visual { min-height:250px; }
  .service-reference-grid .service-visual-caption b { font-size:19px; }
  .article-reference-grid .article-grid { grid-template-columns:1fr; }
  .article-reference-grid .article-card { display:grid; grid-template-columns:116px 1fr; }
  .article-reference-grid .article-image { height:100%; min-height:118px; }
  .article-promo-card { min-height:160px; }
  .article-promo-card strong { font-size:21px; }
  .footer-cta-inner { grid-template-columns:1fr; justify-items:start; padding-block:25px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

/* ========================================================================
   Screenshot fidelity corrections — 2026-09-15 v2
   Fixes text collisions, product cutout presentation and desktop ordering.
   ======================================================================== */

/* Avoid Persian/Latin bidi collisions in the main hero brand line. */
.home-hero .hero-copy h1 {
  letter-spacing: 0;
  overflow: visible;
}
.hero-brand-line {
  display: inline-flex;
  direction: rtl;
  align-items: baseline;
  justify-content: flex-start;
  gap: .16em;
  white-space: nowrap;
  line-height: 1.15;
  font-weight: 900;
}
.hero-brand-red { color: var(--primary); }
.hero-brand-navy { color: #0e2c48; }
html[data-theme="dark"] .hero-brand-navy { color: #fff; }

/* Bring desktop typography closer to the reference and keep blocks from colliding. */
.home-hero .hero-copy { min-width: 0; }
.home-hero .hero-copy p { max-width: 560px; }
.product-section-head > div,
.about-copy,
.service-copy,
.article-body,
.partner-brand-area,
.partner-quote { min-width: 0; }
.product-section-head h2 { margin-top: 4px; font-size: clamp(27px, 2.8vw, 36px); }
.product-section-head .section-subtitle { max-width: 650px; margin-top: 5px; }
.section-subtitle { line-height: 1.9; }

/* Product cards: no scenic texture behind the transparent truck cutouts. */
.category-card { display:flex; flex-direction:column; min-height: 285px; }
.category-visual {
  height: 184px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg,#f5f9fc 0%,#edf4f8 72%,#e7f0f5 100%);
}
.category-visual::before {
  background: radial-gradient(circle at 50% 82%, rgba(32,77,108,.08), transparent 48%);
}
.category-visual img {
  width: 108%;
  height: 108%;
  object-fit: contain;
  object-position: center 51%;
  transform: translateY(4px) scale(1.03);
  filter: drop-shadow(0 8px 9px rgba(19,43,59,.12));
}
.category-card:hover .category-visual img { transform: translateY(1px) scale(1.055); }
.category-copy { flex:1; position:relative; padding: 11px 14px 14px; }
.category-card h3 { font-size: 15.5px; line-height:1.45; }
.category-card p {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  min-height: 32px;
  max-height: 34px;
  line-height:1.75;
  padding-left: 24px;
  font-size: 9px;
}
.category-title-row { min-height: 27px; }
.card-arrow { bottom: 12px; }
html[data-theme="dark"] .category-visual {
  background: linear-gradient(180deg,#132b3a 0%,#0d2230 72%,#0a1c28 100%);
}
html[data-theme="dark"] .category-visual::before {
  background: radial-gradient(circle at 50% 80%, rgba(145,181,202,.13), transparent 50%);
}
html[data-theme="dark"] .category-visual img {
  filter: brightness(.94) contrast(1.04) drop-shadow(0 10px 14px rgba(0,0,0,.34));
}

/* About section hierarchy: match the reference's large title + smaller supporting lead. */
.about-reference-grid .about-copy h2 { margin:4px 0 2px; font-size: clamp(29px,3.1vw,40px); line-height:1.35; }
.about-lead { margin:0 0 12px; font-size: 14px; line-height:1.8; font-weight:800; color:var(--text); }
.about-reference-grid .about-copy .rich-intro,
.about-reference-grid .about-copy p { font-size: 11.5px; line-height:2.05; }
.about-stat-list strong { font-size: 20px; }
.about-stat-list small { line-height:1.6; }

/* Partners: physically place logos/title on the left and quote card on the right. */
.partner-reference-grid { direction:ltr; grid-template-columns: 1.5fr .72fr; }
.partner-brand-area,
.partner-reference-grid .partner-quote { direction:rtl; }
.partner-brand-area { grid-column:1; }
.partner-reference-grid .partner-quote { grid-column:2; }
.partner-heading { text-align:right; }
.partner-logo-grid span { min-height: 72px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.partner-reference-grid .partner-quote { overflow:hidden; }
.partner-reference-grid .quote-mark { position:absolute; top:7px; left:14px; font-size:44px; line-height:1; opacity:.18; }
.partner-reference-grid .partner-quote p { padding-left: 22px; }

/* Service hierarchy and icons. */
.service-reference-grid .service-copy h2 { margin: 4px 0 0; }
.service-lead { margin: 0 0 8px; font-size:16px; line-height:1.7; color:#fff; }
.service-mini-row article { min-width:0; }
.service-icon { width:24px; height:24px; display:grid; place-items:center; color:var(--primary); }
.service-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.service-reference-grid .service-visual-caption { max-width: 250px; }

/* Article cards: stable height and no title/date collisions. */
.article-reference-grid .article-card { display:flex; flex-direction:column; min-width:0; }
.article-reference-grid .article-body { flex:1; display:flex; flex-direction:column; }
.article-reference-grid .article-body small { display:block; direction:rtl; color:var(--muted); margin-bottom:2px; }
.article-reference-grid .article-body h3 {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  min-height:38px;
  max-height:40px;
}
.article-reference-grid .article-body > span { margin-top:auto; color:var(--primary); font-weight:800; }

/* Footer and CTA physical order to match the supplied desktop reference. */
.footer-cta-inner { direction:ltr; }
.footer-cta-inner > * { direction:rtl; }
.footer-cta-copy { text-align:right; }
.footer-cta-slogan { text-align:right; align-items:flex-start; }
.footer-grid { direction:ltr; }
.footer-grid > * { direction:rtl; }
.footer-brand { text-align:right; }
.footer-future {
  position:relative;
  min-height:110px;
  padding-right: 5px;
  overflow:hidden;
}
.footer-future::after {
  content:"";
  position:absolute;
  left:-8px;
  bottom:-22px;
  width:155px;
  height:105px;
  background:url('../images/radman/category-truck.webp') center/contain no-repeat;
  opacity:.16;
  filter:grayscale(1);
}
.footer-future i { display:none; }

/* Minor spacing refinements visible in the desktop reference. */
.products-showcase { padding-top: 50px; }
.why-section { border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent); }
.service-band + .articles-home { border-top:0; }
.article-promo-card > div { z-index:1; }

@media (max-width:1120px) {
  .partner-reference-grid { grid-template-columns:1fr; direction:rtl; }
  .partner-brand-area, .partner-reference-grid .partner-quote { grid-column:auto; }
  .partner-reference-grid .partner-quote { order:2; }
}

@media (max-width:900px) {
  .hero-brand-line { justify-content:flex-start; }
  .category-card { min-height: 0; }
  .footer-grid { direction:rtl; }
  .footer-cta-inner { direction:rtl; }
}

@media (max-width:620px) {
  .home-hero .hero-copy h1 { line-height:1.2; }
  .hero-brand-line { gap:.12em; }
  .category-card { display:grid; }
  .category-visual img { transform:translateY(2px) scale(1.04); }
  .category-card:hover .category-visual img { transform:translateY(0) scale(1.055); }
  .about-lead { font-size:12px; }
  .service-lead { font-size:13px; }
}

/* Final media cleanup presentation: hide residual studio-background edges
   without tinting the vehicles or exposing white rectangles in dark mode. */
.category-visual,
.product-image,
.main-product-image {
  overflow:hidden;
}
.category-visual img {
  width:118%;
  height:118%;
  max-width:none;
  object-fit:contain;
  object-position:center 46%;
  transform:translateY(-1px) scale(1.02);
}
.category-card:hover .category-visual img { transform:translateY(-2px) scale(1.045); }

html[data-theme="dark"] .category-visual,
html[data-theme="dark"] .product-image {
  background:linear-gradient(180deg,#edf3f6 0%,#dde8ed 100%);
}
html[data-theme="dark"] .category-visual::after,
html[data-theme="dark"] .product-image::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(6,21,31,.20),rgba(6,21,31,.34));
}
html[data-theme="dark"] .category-visual img,
html[data-theme="dark"] .product-image img {
  filter:brightness(.90) contrast(1.03) saturate(.94) drop-shadow(0 7px 10px rgba(0,0,0,.14));
}

.product-image { position:relative; background:linear-gradient(180deg,#f5f9fb,#e8f1f5); }
.product-image img {
  width:116%;
  height:116%;
  max-width:none;
  object-fit:contain;
  object-position:center 46%;
  padding:0;
  transform:translateY(-1px) scale(1.02);
}
.product-card:hover .product-image img { transform:translateY(-2px) scale(1.045); }

.main-product-image { position:relative; background:#eef4f7; }
.main-product-image img {
  width:108%;
  height:108%;
  max-width:none;
  object-fit:contain;
  object-position:center 46%;
  background:#eef4f7;
  transform:translateY(-1%);
}
html[data-theme="dark"] .main-product-image,
html[data-theme="dark"] .main-product-image img { background:#dce7ec; }
html[data-theme="dark"] .main-product-image img { filter:brightness(.88) contrast(1.04); }

@media (max-width:620px) {
  .category-visual img,
  .product-image img { width:114%; height:114%; }
}

/* Final heading hierarchy to mirror the reference (title first, subtitle second). */
.product-section-head h2,
.why-head h2,
.articles-home .section-head h2 { margin-top:0; }
.why-head .section-subtitle { margin:3px 0 0; }
.about-copy > h2 { margin-top:0; }
.service-copy > h2 { margin-top:0; }

/* Dark product media keeps the same neutral studio field under a stronger
   navy veil, so leftover matte pixels disappear while the whole image still
   reads as a dark-mode card like the reference. */
html[data-theme="dark"] .category-visual::after,
html[data-theme="dark"] .product-image::after {
  background:linear-gradient(180deg,rgba(6,21,31,.40),rgba(6,21,31,.50));
}

/* ========================================================================
   Reference fidelity pass v3 — supplied home1 / home2 / mobile-home
   ======================================================================== */

/* --- Header / brand ---------------------------------------------------- */
.site-header {
  height: 70px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 82%, transparent);
}
.header-inner { width:min(1320px, calc(100% - 48px)); }
.brand { gap:7px; }
.brand-mark {
  width:38px;
  height:39px;
  padding:0;
  display:grid;
  place-items:center;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  color:var(--primary);
  font:900 italic 34px/.9 Arial, sans-serif;
  transform:skew(-8deg) scaleX(.9);
  letter-spacing:-.12em;
  overflow:visible;
  text-shadow:none;
}
.brand-copy b { font-size:16px; font-weight:900; letter-spacing:-.02em; }
.brand-copy small { color:#6f8190; font-size:7px; margin-top:3px; letter-spacing:.15em; }
.desktop-nav { gap:5px; }
.desktop-nav a { font-size:11.5px; padding-inline:11px; font-weight:800; }
.desktop-nav a.active::after,
.desktop-nav a:hover::after { height:2px; bottom:0; }
.header-cta { min-height:39px; border-radius:7px; padding:7px 17px; font-size:10.5px; box-shadow:none; }
.header-search { display:none; }
.site-header > .header-inner .theme-toggle { display:none; }
html[data-theme="dark"] .site-header {
  background:rgba(5,18,27,.96);
  border-bottom-color:#17303f;
  box-shadow:none;
}
html[data-theme="dark"] .brand-copy small { color:#8296a5; }

/* --- Hero -------------------------------------------------------------- */
.mobile-hero-title { display:none; }
.home-hero,
.home-hero .hero-grid { min-height:540px; }
.home-hero { border-bottom:0; }
.home-hero .hero-grid {
  grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  width:min(1360px, calc(100% - 36px));
  padding-inline:0;
}
.home-hero .hero-media {
  opacity:1;
  background-position:29% 49%;
  background-size:cover;
  filter:brightness(1.42) saturate(.74) contrast(.86);
}
.home-hero::after {
  background:
    linear-gradient(90deg, rgba(244,249,252,0) 0%, rgba(245,250,253,.06) 34%, rgba(247,251,253,.54) 58%, rgba(249,252,254,.90) 77%, rgba(250,252,254,.985) 100%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(226,237,244,.05));
}
.home-hero .hero-copy {
  max-width:500px;
  padding:44px 0 34px;
  padding-inline-end:86px;
  align-self:center;
}
.home-hero .hero-copy .hero-kicker { display:none; }
.home-hero .desktop-hero-title {
  font-size:clamp(46px,4.75vw,68px);
  line-height:1.12;
  font-weight:900;
  margin:0;
}
.hero-brand-line { gap:.13em; }
.home-hero .hero-copy p {
  max-width:500px;
  margin:15px 0 22px;
  font-size:11.5px;
  line-height:2.05;
  font-weight:500;
}
.home-hero .hero-actions { gap:10px; }
.home-hero .hero-actions .btn { min-height:44px; border-radius:8px; padding:8px 19px; font-size:10.5px; }
.home-hero .hero-points { display:none; }
.hero-side-values {
  inset-inline-start:20px;
  top:144px;
  width:74px;
  transform:none;
  padding-inline-start:0;
  gap:5px;
  border-inline-start:0;
  font-size:9px;
  line-height:1.7;
  text-align:right;
  align-items:flex-start;
}
.hero-english-rail {
  position:absolute;
  left:8px;
  top:22px;
  z-index:4;
  display:flex;
  flex-direction:column;
  direction:ltr;
  color:#243f54;
  font:700 10px/1.45 Arial,sans-serif;
  letter-spacing:.34em;
  opacity:.92;
}
html[data-theme="dark"] .home-hero .hero-media {
  filter:brightness(.74) saturate(.96) contrast(1.06);
  background-position:29% 49%;
}
html[data-theme="dark"] .home-hero::after {
  background:
    linear-gradient(90deg, rgba(2,11,17,.00) 0%, rgba(2,11,17,.07) 34%, rgba(3,14,21,.54) 58%, rgba(4,16,24,.90) 77%, rgba(4,16,24,.985) 100%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.14));
}
html[data-theme="dark"] .hero-english-rail { color:#e4edf3; opacity:.76; }

/* --- Benefit strip ----------------------------------------------------- */
.benefit-strip {
  box-shadow:none;
  border-top:1px solid var(--line);
}
.benefit-grid { width:min(1360px, calc(100% - 36px)); }
.benefit-grid article { min-height:72px; padding:12px 18px; gap:12px; justify-content:center; }
.benefit-grid article + article { border-right-color:color-mix(in srgb,var(--line) 82%,transparent); }
.benefit-icon { width:35px; height:35px; background:transparent; border-radius:0; }
.benefit-icon svg { width:25px; height:25px; stroke-width:1.75; }
.benefit-grid b { font-size:11px; }
.benefit-grid small { font-size:8.25px; color:var(--muted); }

/* --- Product category cards ------------------------------------------- */
.products-showcase { padding:54px 0 62px; }
.product-section-head { margin-bottom:21px; align-items:end; }
.product-section-head h2 { font-size:28px; line-height:1.35; }
.product-section-head .section-subtitle { margin:3px 0 0; font-size:10px; }
.product-section-head .text-link { font-size:9.5px; }
.category-grid { gap:16px; }
.category-card {
  padding:0;
  min-height:266px;
  border-radius:8px;
  box-shadow:none;
  overflow:hidden;
}
.category-card:hover { transform:translateY(-3px); }
.category-visual {
  height:176px;
  border-radius:0;
  background:linear-gradient(180deg,#f6fafc 0%,#edf3f6 100%);
}
.category-visual::before {
  z-index:0;
  background:radial-gradient(ellipse at 50% 86%,rgba(31,72,99,.07),transparent 46%);
}
.category-visual::after { display:none !important; }
.category-visual img {
  z-index:1;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center 56%;
  transform:translateY(3px) scale(1);
  filter:drop-shadow(0 8px 10px rgba(20,43,59,.12));
}
.category-card:hover .category-visual img { transform:translateY(1px) scale(1.025); }
.category-copy { padding:10px 14px 14px; }
.category-title-row { min-height:26px; }
.category-card h3 { font-size:14.5px; line-height:1.45; }
.category-card p { min-height:30px; max-height:34px; font-size:8.7px; line-height:1.72; padding-left:21px; }
.category-line-icon svg { width:24px; height:19px; }
.card-arrow { bottom:12px; left:13px; font-size:11px; }
html[data-theme="dark"] .category-card { background:#0a1b27; border-color:#1a3140; }
html[data-theme="dark"] .category-visual {
  background:linear-gradient(180deg,#112534 0%,#0b1d28 100%);
}
html[data-theme="dark"] .category-visual::before {
  background:radial-gradient(ellipse at 50% 86%,rgba(145,181,202,.10),transparent 49%);
}
html[data-theme="dark"] .category-visual img {
  filter:brightness(.94) contrast(1.02) saturate(.96) drop-shadow(0 9px 12px rgba(0,0,0,.34));
}

/* --- About ------------------------------------------------------------- */
.about-home { padding:45px 0; }
.about-reference-grid {
  grid-template-columns:minmax(285px,.95fr) minmax(445px,1.42fr) minmax(170px,.52fr);
  gap:14px;
}
.about-reference-grid .about-copy { padding:8px 10px 8px 0; }
.about-reference-grid .about-copy h2 { font-size:29px; margin:0 0 1px; }
.about-lead { margin:0 0 10px; font-size:12.5px; }
.about-reference-grid .about-copy .rich-intro,
.about-reference-grid .about-copy p { font-size:10.2px; line-height:2; margin:0 0 14px; }
.about-more { min-height:38px; border-radius:7px; padding:7px 15px; font-size:9px; }
.about-reference-grid .about-image-wrap,
.about-reference-grid .about-image-wrap > img { min-height:300px; height:300px; }
.about-reference-grid .about-image-wrap { border-radius:6px; }
.about-reference-grid .about-image-caption { right:24px; bottom:24px; font-size:19px; }
.about-stat-list { border-radius:6px; }
.about-stat-list > div { min-height:72px; padding:8px 10px; grid-template-columns:34px 1fr; }
.about-stat-list .stat-icon { font-size:0; }
.about-stat-list .stat-icon svg {
  width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.about-stat-list strong { font-size:17px; }
.about-stat-list small { font-size:7.8px; line-height:1.55; }

/* --- Why us ------------------------------------------------------------ */
.why-section { padding:34px 0 40px; }
.why-head { margin-bottom:12px; }
.why-head h2 { font-size:20px; }
.why-head .section-subtitle { font-size:9px; }
.why-grid { gap:9px; }
.why-grid article { min-height:117px; padding:14px 9px; border-radius:7px; box-shadow:0 5px 16px rgba(20,46,63,.045); }
.why-grid article > span { width:34px; height:34px; margin-bottom:6px; }
.why-grid article > span svg { width:25px; height:25px; }
.why-grid h3 { font-size:11px; }
.why-grid p { font-size:7.8px; line-height:1.65; }

/* --- Partners ---------------------------------------------------------- */
.partner-reference-grid { min-height:190px; padding-block:18px; gap:22px; }
.partner-heading h2 { font-size:21px; }
.partner-heading p { font-size:9px; margin-bottom:9px; }
.partner-logo-grid { gap:7px; }
.partner-logo-grid span { min-height:65px; border-radius:6px; }
.partner-logo-grid b { font-size:11.5px; }
.partner-logo-grid small { font-size:5.7px; }
.partner-reference-grid .partner-quote { padding:17px 20px; border-radius:6px; }
.partner-reference-grid .partner-quote p { font-size:9px; line-height:1.85; }
.partner-reference-grid .partner-quote b { font-size:9px; }
.partner-reference-grid .partner-quote small { font-size:7px; }

/* --- After-sales service ---------------------------------------------- */
.service-reference-grid { min-height:300px; grid-template-columns:minmax(0,.98fr) minmax(0,1.08fr); }
.service-reference-grid .service-copy { padding:34px 0 34px 30px; }
.service-reference-grid .service-copy h2 { font-size:27px; }
.service-lead { font-size:13px; margin-bottom:5px; }
.service-reference-grid .service-copy p { font-size:9.5px; line-height:1.9; }
.service-mini-row { margin-top:15px; gap:7px; }
.service-mini-row article { min-height:57px; border-radius:7px; padding:7px 5px; }
.service-mini-row article b { font-size:8px; }
.service-more-btn { min-height:37px; margin-top:13px; border-radius:7px; font-size:8.5px; padding:6px 13px; }
.service-reference-grid .service-visual { min-height:300px; }
.service-reference-grid .service-visual > img { width:100%; height:100%; min-height:300px; object-fit:cover; }
.service-reference-grid .service-visual-caption { left:27px; bottom:24px; }
.service-reference-grid .service-visual-caption b { font-size:20px; line-height:1.5; }
.service-reference-grid .service-visual-caption small { font-size:7.5px; }
html[data-theme="light"] .service-band {
  background:#f9fbfc;
  color:#112b40;
  border-color:var(--line);
}
html[data-theme="light"] .service-reference-grid .service-copy p { color:#536a7a; }
html[data-theme="light"] .service-lead { color:#112b40; }
html[data-theme="light"] .service-mini-row article {
  background:#fff;
  border-color:#dce5eb;
  color:#18374f;
  box-shadow:0 4px 14px rgba(20,45,62,.04);
}
html[data-theme="light"] .service-more-btn {
  color:#18374f;
  border-color:#afbdc7;
  background:#fff;
}
html[data-theme="light"] .service-reference-grid .service-visual::after {
  background:linear-gradient(90deg,rgba(5,17,25,.12),rgba(5,17,25,.01) 58%,rgba(255,255,255,.04));
}

/* --- Articles ---------------------------------------------------------- */
.articles-home { padding:44px 0 49px; }
.articles-home .section-head { margin-bottom:15px; }
.articles-home .section-head h2 { font-size:23px; }
.articles-home .section-subtitle { margin-top:2px; font-size:9px; }
.articles-home .text-link { font-size:9px; }
.article-reference-grid { gap:12px; grid-template-columns:.69fr 2.31fr; }
.article-reference-grid .article-grid { gap:10px; }
.article-reference-grid .article-image { height:118px; }
.article-reference-grid .article-body { padding:8px 10px 10px; }
.article-reference-grid .article-body h3 { font-size:10.5px; min-height:34px; max-height:36px; }
.article-promo-card { border-radius:7px; }
.article-promo-card > div { padding:18px; }
.article-promo-card span { font-size:10px; }
.article-promo-card strong { font-size:21px; }

/* --- Footer ------------------------------------------------------------ */
.footer-cta-inner { min-height:187px; }
.footer-cta-copy .eyebrow { font-size:9px; }
.footer-cta-copy h2 { font-size:20px; }
.footer-cta-copy p { font-size:8.5px; }
.footer-cta-inner .btn { min-height:39px; border-radius:7px; font-size:9px; }
.footer-grid { padding:28px 0 20px; gap:22px; }
.footer-grid h3 { font-size:11px; margin-bottom:7px; }
.footer-grid a,
.footer-grid p { font-size:8.5px; }
.footer-brand .brand-copy b { font-size:14px; }
.footer-brand .brand-mark { width:34px; height:35px; font-size:31px; }
.footer-bottom { padding-block:10px; }

/* --- Mobile reference -------------------------------------------------- */
@media (max-width:1120px) {
  .desktop-nav { display:none; }
  .header-actions { margin-right:auto; }
  .header-search { display:grid; }
  .header-search svg,
  .mobile-menu-search svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
  .site-header > .header-inner .theme-toggle { display:none; }
  .menu-toggle { display:grid; }
  .about-reference-grid { grid-template-columns:1fr 1.4fr; }
}

@media (max-width:900px) {
  .home-hero,
  .home-hero .hero-grid { min-height:650px; }
  .home-hero .hero-grid { grid-template-columns:1fr; }
  .home-hero .hero-copy { max-width:560px; padding:35px 0 0; }
  .hero-english-rail,
  .hero-side-values { display:none; }
  .service-reference-grid { min-height:0; }
}

@media (max-width:620px) {
  :root { --header-height:64px; }
  .container, .narrow { width:min(100% - 24px, var(--container)); }
  .site-header { height:64px; }
  .header-inner { width:calc(100% - 24px); gap:8px; }
  .brand { margin-left:auto; }
  .brand-mark { width:31px; height:33px; font-size:29px; order:0; }
  .brand-copy b { font-size:14px; }
  .brand-copy small { display:none; }
  .header-actions { margin-right:0; margin-left:0; gap:3px; }
  .header-search,
  .menu-toggle { width:34px; height:34px; border:0; border-radius:50%; background:transparent; }
  .header-search { order:1; }
  .menu-toggle { order:2; }
  .menu-toggle span { width:18px; }

  /* Home mobile header sits on the cinematic hero exactly like the reference. */
  .home-page .site-header {
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    background:linear-gradient(180deg,rgba(5,18,27,.76),rgba(5,18,27,0));
    border-bottom:0;
    box-shadow:none;
    color:#fff;
  }
  .home-page .site-header .brand-copy b { color:#fff; }
  .home-page .site-header .header-search,
  .home-page .site-header .menu-toggle { color:#fff; }

  .home-hero,
  .home-hero .hero-grid { min-height:610px; }
  .home-hero { background:#06141e; color:#fff; }
  .home-hero .hero-media {
    filter:brightness(.72) saturate(.92) contrast(1.06) !important;
    background-position:31% 50%;
    background-size:auto 100%;
  }
  .home-hero::after,
  html[data-theme="dark"] .home-hero::after {
    background:
      linear-gradient(180deg,rgba(4,14,21,.48) 0%,rgba(4,14,21,.17) 34%,rgba(4,14,21,.08) 59%,rgba(4,14,21,.73) 100%),
      linear-gradient(90deg,rgba(4,14,21,.12),rgba(4,14,21,.05));
  }
  .home-hero .hero-grid { width:calc(100% - 24px); display:block; position:relative; }
  .home-hero .hero-copy {
    max-width:none;
    min-height:610px;
    padding:96px 8px 0;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
  }
  .desktop-hero-title { display:none; }
  .mobile-hero-title {
    display:block;
    margin:0;
    color:#fff !important;
    font-size:25px !important;
    line-height:1.55 !important;
    letter-spacing:0 !important;
    text-shadow:0 2px 18px rgba(0,0,0,.30);
  }
  .home-hero .hero-copy p {
    width:min(290px,92%);
    max-width:290px;
    margin:9px auto 0;
    color:#edf4f8 !important;
    font-size:9.5px;
    line-height:1.95;
    text-align:center;
    text-shadow:0 1px 12px rgba(0,0,0,.45);
  }
  .home-hero .hero-actions {
    position:absolute;
    left:50%;
    bottom:68px;
    transform:translateX(-50%);
    width:min(252px,84vw);
    gap:8px;
    z-index:3;
  }
  .home-hero .hero-actions .btn { width:100%; min-height:40px; border-radius:18px; font-size:9.5px; }
  .home-hero .btn-outline {
    color:#fff !important;
    border-color:rgba(255,255,255,.88) !important;
    background:rgba(6,18,27,.34) !important;
    backdrop-filter:blur(5px);
  }
  .home-hero .hero-copy::after {
    content:"01  —  02   03";
    position:absolute;
    bottom:24px;
    right:4px;
    color:#fff;
    font:700 8px/1 Arial,sans-serif;
    letter-spacing:.08em;
    direction:ltr;
  }
  .home-hero .hero-copy::before {
    content:"→";
    position:absolute;
    bottom:16px;
    left:5px;
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50%;
    color:#fff;
    font-size:12px;
  }

  .benefit-strip { background:#fff; padding:10px 0 12px; }
  html[data-theme="dark"] .benefit-strip { background:#fff; }
  .benefit-grid { width:calc(100% - 24px); grid-template-columns:1fr 1fr; gap:7px; }
  .benefit-grid article {
    min-height:82px;
    justify-content:center;
    flex-direction:column;
    gap:3px;
    padding:10px 7px;
    text-align:center;
    border:1px solid #edf1f4 !important;
    border-radius:7px;
    background:#fff;
    color:#102638;
  }
  .benefit-icon { width:29px; height:29px; color:#e51f2b; }
  .benefit-grid b { font-size:9px; }
  .benefit-grid small { display:block !important; font-size:7px; color:#6f7f8c; }

  .products-showcase { padding:38px 0 42px; }
  .product-section-head { margin-bottom:14px; }
  .product-section-head h2 { font-size:21px; }
  .product-section-head .section-subtitle { font-size:8.5px; }
  .category-grid { grid-template-columns:1fr; gap:9px; }
  .category-card {
    display:grid;
    grid-template-columns:112px 1fr;
    min-height:105px;
    border-radius:8px;
    align-items:stretch;
  }
  .category-visual { height:105px; border-radius:8px 0 0 8px; }
  .category-visual img { width:108%; height:108%; }
  .category-copy { padding:12px 11px 10px; display:flex; flex-direction:column; justify-content:center; }
  .category-card h3 { font-size:13px; }
  .category-card p { font-size:8px; min-height:0; max-height:29px; padding-left:14px; }
  .card-arrow { left:11px; bottom:44px; }

  .about-home { padding:34px 0; }
  .about-reference-grid { grid-template-columns:1fr; gap:11px; }
  .about-reference-grid .about-copy { order:2; padding:0; }
  .about-reference-grid .about-image-wrap { order:1; }
  .about-reference-grid .about-image-wrap,
  .about-reference-grid .about-image-wrap > img { min-height:265px; height:265px; }
  .about-reference-grid .about-copy h2 { font-size:22px; }
  .about-lead { font-size:11px; }
  .about-reference-grid .about-copy p,
  .about-reference-grid .about-copy .rich-intro { font-size:9px; }
  .about-stat-list { order:3; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
  .about-stat-list > div { min-height:74px; }

  .why-section { padding:30px 0 34px; }
  .why-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .why-grid article { min-height:112px; padding:14px 8px; }
  .why-grid article:nth-child(5) { grid-column:1/-1; }
  .why-grid p { display:block; font-size:7.4px; }

  .partner-reference-grid { min-height:0; padding:23px 0; }
  .partner-logo-grid { grid-template-columns:repeat(3,1fr); }

  .service-reference-grid { grid-template-columns:1fr; }
  .service-reference-grid .service-copy { order:2; padding:27px 0; }
  .service-reference-grid .service-visual { order:1; min-height:260px; margin:0 -12px; }
  .service-reference-grid .service-visual > img { min-height:260px; }
  .service-mini-row { grid-template-columns:1fr 1fr; }

  .articles-home { padding:36px 0 42px; }
  .article-reference-grid { grid-template-columns:1fr; }
  .article-promo-card { min-height:150px; }
  .article-reference-grid .article-grid { grid-template-columns:1fr; gap:8px; }
  .article-reference-grid .article-card { display:grid; grid-template-columns:108px 1fr; }
  .article-reference-grid .article-image { height:100%; min-height:104px; }

  /* Full-height dark drawer like the supplied mobile menu reference. */
  .mobile-menu { display:block; }
  .mobile-menu-panel {
    width:min(390px,100vw);
    margin-right:0;
    margin-left:auto;
    padding:18px 16px 22px;
    background:linear-gradient(180deg,#0a1d2a,#06141e);
    box-shadow:-14px 0 40px rgba(0,0,0,.26);
  }
  .mobile-menu-top { padding:0 0 14px; border-bottom:0; }
  .mobile-menu-top .brand { margin-left:0; }
  .mobile-menu-top .brand-copy b { color:#fff; font-size:15px; }
  .menu-close { width:34px; height:34px; border:0; background:transparent; font-size:25px; }
  .mobile-menu-search {
    height:43px;
    display:flex;
    align-items:center;
    gap:8px;
    margin:5px 0 13px;
    padding:0 12px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:9px;
    background:#102431;
  }
  .mobile-menu-search button { width:24px; height:24px; display:grid; place-items:center; border:0; background:transparent; color:#fff; padding:0; }
  .mobile-menu-search input { flex:1; border:0; outline:0; background:transparent; color:#fff; font-size:10px; direction:rtl; }
  .mobile-menu-search input::placeholder { color:#8395a2; }
  .mobile-nav { margin:0 0 auto; gap:0; }
  .mobile-nav a { min-height:48px; padding:8px 3px; border-bottom:1px solid rgba(255,255,255,.055); font-size:10.5px; }
  .mobile-nav a > span { width:26px; text-align:center; font-size:14px; }
  .mobile-nav b { font-size:17px; }
  .mobile-menu-actions { display:grid; gap:9px; margin-top:18px; }
  .mobile-menu-actions .btn { min-height:42px; border-radius:8px; font-size:9.5px; }
  .mobile-call { margin-top:0; min-height:42px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:8px; background:#102431; border:0; color:#e8eff4; }
  .mobile-menu-social { display:flex; justify-content:center; gap:18px; margin-top:20px; color:#c4d0d8; font-size:12px; }
  .mobile-menu-social span { width:27px; height:27px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); border-radius:50%; }
  .mobile-menu-signature { display:flex; flex-direction:column; align-items:center; gap:1px; margin-top:18px; color:#a9b7c1; font-size:8px; }
  .mobile-menu-signature b { color:#fff; font-size:10px; }
  .mobile-menu-signature small { margin-top:6px; color:#6e818e; }

  .footer-cta-inner { min-height:0; padding:24px 0; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:620px) {
  /* Mobile reference keeps media thumbnails on the physical left while text stays RTL. */
  .category-card,
  .article-reference-grid .article-card,
  .product-card { direction:ltr; }
  .category-copy,
  .article-reference-grid .article-body,
  .product-body { direction:rtl; text-align:right; }
  .category-visual { border-radius:8px 0 0 8px; }
}

/* ======================================================================
   About section — reference fidelity patch v4
   Matches home1/home2 on desktop and mobile-home on small screens.
   ====================================================================== */
.about-home {
  padding: 42px 0 44px;
  overflow: hidden;
}
.about-reference-grid {
  width: min(90%, 1740px);
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0,1.75fr) minmax(0,2fr) minmax(0,1fr);
  gap: 16px;
  align-items: stretch;
}
.about-reference-grid .about-copy {
  min-width: 0;
  padding: 14px 22px 12px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: right;
}
.about-reference-grid .about-copy h2 {
  margin: 0 0 2px;
  font-size: clamp(28px, 2.05vw, 39px);
  line-height: 1.35;
  letter-spacing: -.035em;
}
.about-lead {
  margin: 0 0 15px;
  font-size: clamp(12px, .86vw, 16px);
  line-height: 1.8;
  font-weight: 700;
  color: var(--text);
}
.about-reference-grid .about-copy .rich-intro,
.about-reference-grid .about-copy p {
  width: 100%;
  max-width: 94%;
  margin: 0 0 20px;
  font-size: clamp(10.5px, .69vw, 13px);
  line-height: 2.05;
  color: var(--muted);
}
.about-more-desktop {
  min-width: 132px;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 10px;
}
.about-reference-grid .about-image-wrap,
.about-reference-grid .about-image-wrap > img {
  min-height: 348px;
  height: 348px;
}
.about-reference-grid .about-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  background: #0b1b27;
}
.about-reference-grid .about-image-wrap > img {
  width: 100%;
  object-fit: cover;
  object-position: center center;
}
.about-reference-grid .about-home-video {
  display: block;
  width: 100%;
  min-height: 348px;
  height: 348px;
  object-fit: cover;
  object-position: center center;
  background: #06141e;
}
.about-reference-grid .about-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(3,13,20,.06) 0%, rgba(3,13,20,0) 50%, rgba(3,13,20,.28) 100%);
}
.about-reference-grid .about-image-wrap.has-video::after {
  background: linear-gradient(180deg, rgba(3,13,20,.08), transparent 22%);
}
.about-reference-grid .about-image-caption {
  right: auto;
  left: 34px;
  bottom: 27px;
  z-index: 3;
  font-size: clamp(19px,1.35vw,25px);
  line-height: 1.45;
  font-weight: 900;
  text-align: right;
  color: #fff;
  text-shadow: 0 3px 18px rgba(0,0,0,.42);
}
.about-reference-grid .about-image-caption::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 8px;
  background: var(--primary);
  border-radius: 9px;
}
.about-stat-list {
  min-width: 0;
  display: grid;
  grid-template-rows: repeat(4,1fr);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb,var(--surface) 94%,transparent);
  overflow: hidden;
}
.about-stat-list > div {
  min-height: 0;
  padding: 12px 20px;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-content: center;
  border-bottom: 1px solid var(--line);
}
.about-stat-list > div:last-child { border-bottom: 0; }
.about-stat-list .stat-icon {
  grid-row: 1 / 3;
  align-self: center;
  justify-self: center;
  color: #173e61;
}
.about-stat-list .stat-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about-stat-list strong {
  font-size: clamp(18px,1.15vw,22px);
  line-height: 1.1;
  direction: ltr;
  text-align: right;
}
.about-stat-list small {
  margin-top: 4px;
  font-size: clamp(8px,.57vw,10.5px);
  line-height: 1.55;
  color: var(--muted);
}
.about-more-mobile,
.about-mobile-road { display: none; }

html[data-theme="dark"] .about-home {
  background: #071720;
  border-color: #1b303d;
}
html[data-theme="dark"] .about-reference-grid .about-image-wrap > img {
  filter: brightness(.72) saturate(.88) contrast(1.06);
}
html[data-theme="dark"] .about-reference-grid .about-image-wrap::after {
  background: linear-gradient(90deg, rgba(2,11,17,.12) 0%, rgba(2,11,17,.03) 48%, rgba(2,11,17,.42) 100%);
}
html[data-theme="dark"] .about-stat-list {
  background: #091a25;
  border-color: #203847;
}
html[data-theme="dark"] .about-stat-list > div { border-bottom-color: #203847; }
html[data-theme="dark"] .about-stat-list .stat-icon { color: #e8eef2; }
html[data-theme="dark"] .about-more-desktop {
  background: transparent;
  border-color: var(--primary);
  color: #fff;
}
html[data-theme="light"] .about-home {
  background: #f7fafc;
  border-color: #e3eaf0;
}

@media (max-width: 1120px) and (min-width: 621px) {
  .about-reference-grid { width: calc(100% - 42px); grid-template-columns: minmax(0,1.6fr) minmax(0,1.9fr) minmax(0,.92fr); gap: 12px; }
  .about-reference-grid .about-copy { padding-inline: 10px; }
  .about-reference-grid .about-image-wrap,
  .about-reference-grid .about-image-wrap > img { min-height: 310px; height: 310px; }
  .about-reference-grid .about-home-video { min-height: 310px; height: 310px; }
  .about-stat-list > div { padding: 10px 12px; grid-template-columns: 34px 1fr; column-gap: 8px; }
  .about-stat-list .stat-icon svg { width: 23px; height: 23px; }
}

@media (max-width: 620px) {
  .about-home {
    padding: 0;
    border-block: 0;
  }
  .about-reference-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .about-reference-grid .about-image-wrap {
    order: 1;
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
  .about-reference-grid .about-image-wrap,
  .about-reference-grid .about-image-wrap > img {
    min-height: 245px;
    height: 245px;
  }
  .about-reference-grid .about-home-video {
    min-height: 245px;
    height: 245px;
  }
  .about-reference-grid .about-image-wrap > img {
    object-position: center 50%;
  }
  .about-reference-grid .about-image-caption {
    display: none;
  }
  .about-reference-grid .about-copy {
    order: 2;
    padding: 22px 22px 14px;
    align-items: stretch;
    text-align: center;
  }
  .about-reference-grid .about-copy h2 {
    margin: 0 0 3px;
    font-size: 24px;
    line-height: 1.45;
    text-align: center;
  }
  .about-lead {
    margin: 0 0 12px;
    font-size: 10.5px;
    text-align: center;
  }
  .about-reference-grid .about-copy .rich-intro,
  .about-reference-grid .about-copy p {
    max-width: 330px;
    margin: 0 auto;
    font-size: 9.4px;
    line-height: 2.05;
    text-align: center;
  }
  .about-more-desktop { display: none; }
  .about-stat-list {
    order: 3;
    width: calc(100% - 34px);
    margin: 0 auto 18px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    overflow: visible;
    border: 0;
    background: transparent !important;
  }
  .about-stat-list > div {
    min-height: 91px;
    padding: 13px 12px;
    border: 1px solid var(--line) !important;
    border-radius: 10px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    text-align: center;
  }
  .about-stat-list .stat-icon {
    order: 2;
    margin-top: 2px;
  }
  .about-stat-list .stat-icon svg { width: 20px; height: 20px; }
  .about-stat-list strong { order: 1; font-size: 19px; text-align: center; }
  .about-stat-list small { order: 3; margin: 0; font-size: 8px; }
  .about-more-mobile {
    order: 4;
    display: inline-flex;
    width: calc(100% - 34px);
    min-height: 46px;
    margin: 0 auto 18px;
    border-radius: 9px;
    font-size: 10px;
  }
  .about-mobile-road {
    order: 5;
    display: flex;
    min-height: 116px;
    width: 100%;
    padding: 18px 22px;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    background:
      linear-gradient(90deg, rgba(5,18,27,.18), rgba(5,18,27,.64)),
      url('../images/radman/cta-road.webp') center 56% / cover no-repeat;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.5;
  }
  html[data-theme="dark"] .about-stat-list > div {
    background: #0d202c;
    border-color: #1d3442 !important;
  }
  html[data-theme="dark"] .about-reference-grid .about-image-wrap > img {
    filter: brightness(.76) saturate(.9) contrast(1.05);
  }
}

/* ======================================================================
   Homepage reference fidelity v5 — why / partners / after-sales
   These overrides intentionally live at the end of the stylesheet so the
   three desktop sections follow home1/home2 while preserving mobile rules.
   ====================================================================== */
:root { --home-reference-wide: 1680px; }
.home-reference-wide {
  width: min(var(--home-reference-wide), calc(100% - 64px));
  margin-inline: auto;
}

/* Why Radman Diesel: wide five-card strip with the heading on the right. */
.why-section {
  padding: 28px 0 34px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.why-section .why-head {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 12px;
  text-align: right;
}
.why-section .why-head > div { width: 100%; }
.why-section .why-head h2 {
  margin: 0;
  font-size: clamp(20px, 1.35vw, 28px);
  line-height: 1.35;
}
.why-section .why-head .section-subtitle {
  margin: 2px 0 0;
  font-size: 10px;
  line-height: 1.8;
}
.why-section .why-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.why-section .why-grid article {
  min-height: 114px;
  padding: 14px 10px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 5px 18px rgba(20,46,63,.045);
}
.why-section .why-grid article > span {
  width: 35px;
  height: 35px;
  margin: 0 auto 6px;
  display: grid;
  place-items: center;
  color: #174c82;
  background: transparent;
}
.why-section .why-grid article > span svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.why-section .why-grid h3 { margin: 1px 0 2px; font-size: 12px; line-height: 1.55; }
.why-section .why-grid p { margin: 0; max-width: 230px; font-size: 8.5px; line-height: 1.75; color: var(--muted); }
html[data-theme="dark"] .why-section .why-grid article {
  background: rgba(255,255,255,.025);
  border-color: #203746;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
html[data-theme="dark"] .why-section .why-grid article > span { color: #e3ebf0; }

/* Clients/partners: keep the visual scale of the reference on wide screens. */
.partner-band {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background-color: #edf3f7;
  background-image:
    linear-gradient(90deg, rgba(246,249,251,.97) 0%, rgba(246,249,251,.86) 28%, rgba(246,249,251,.44) 59%, rgba(246,249,251,.80) 100%),
    url('../images/radman/cta-road.webp');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center 54%;
  background-size: auto, 1180px auto;
}
.partner-band .partner-reference-grid {
  min-height: 160px;
  padding-block: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .72fr);
  gap: 26px;
  align-items: center;
  direction: ltr;
}
.partner-band .partner-brand-area,
.partner-band .partner-quote { direction: rtl; }
.partner-band .partner-heading { text-align: right; }
.partner-band .partner-heading h2 { margin: 0; font-size: 22px; line-height: 1.4; }
.partner-band .partner-heading p { margin: 0 0 9px; font-size: 9.5px; color: var(--muted); }
.partner-band .partner-logo-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 8px;
  direction: ltr;
}
.partner-band .partner-logo-card {
  min-width: 0;
  min-height: 72px;
  padding: 6px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid rgba(43,74,96,.16);
  border-radius: 7px;
  background: rgba(255,255,255,.82);
  color: #244a69;
  text-align: center;
}
.partner-band .partner-mark {
  width: 40px;
  height: 27px;
  display: grid;
  place-items: center;
  margin-bottom: 1px;
  color: #315f88;
}
.partner-band .partner-mark svg { width: 40px; height: 27px; }
.partner-band .partner-mark svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.partner-band .mark-mapna svg path:first-child,
.partner-band .mark-mapna svg path:nth-child(2),
.partner-band .mark-mapna svg path:nth-child(3) { fill: currentColor; stroke: none; }
.partner-band .partner-logo-card b { font-size: 10.5px; line-height: 1.3; direction: rtl; }
.partner-band .partner-logo-card small { font-size: 5.8px; line-height: 1.2; color: #7b8c98; direction: ltr; }
.partner-band .partner-quote {
  position: relative;
  margin: 0;
  padding: 18px 23px 16px;
  min-height: 122px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(43,74,96,.18);
  border-radius: 8px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 7px 22px rgba(14,42,61,.07);
}
.partner-band .partner-quote .quote-mark { top: 4px; left: 14px; font-size: 43px; opacity: .20; }
.partner-band .partner-quote p { margin: 0 0 9px; padding-left: 22px; font-size: 9.5px; line-height: 1.9; }
.partner-band .partner-quote b { font-size: 9px; }
.partner-band .partner-quote small { font-size: 7px; color: var(--muted); }
html[data-theme="dark"] .partner-band {
  background-color: #091a26;
  background-image:
    linear-gradient(90deg, rgba(5,17,25,.96) 0%, rgba(5,17,25,.83) 30%, rgba(5,17,25,.45) 58%, rgba(5,17,25,.78) 100%),
    url('../images/radman/cta-road.webp');
}
html[data-theme="dark"] .partner-band .partner-logo-card,
html[data-theme="dark"] .partner-band .partner-quote {
  background: rgba(8,27,39,.86);
  border-color: #2a4352;
  color: #e7edf1;
}
html[data-theme="dark"] .partner-band .partner-mark { color: #c8d2d9; }
html[data-theme="dark"] .partner-band .partner-logo-card small { color: #8495a1; }

/* After-sales: full visual on the left, wide copy area on the right. */
.service-band { background: #081824; overflow: hidden; }
.service-band .service-reference-grid {
  min-height: 320px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: stretch;
  direction: rtl;
}
.service-band .service-copy {
  min-width: 0;
  padding: 34px 0 34px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  direction: rtl;
  text-align: right;
}
.service-band .service-copy h2 { margin: 0; font-size: clamp(27px,1.8vw,34px); line-height: 1.35; }
.service-band .service-lead { margin: 0 0 5px; font-size: 13px; line-height: 1.7; }
.service-band .service-copy > p { margin: 0; max-width: 690px; font-size: 9.5px; line-height: 1.9; }
.service-band .service-mini-row {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
}
.service-band .service-mini-row article {
  min-width: 0;
  min-height: 58px;
  padding: 7px 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
}
.service-band .service-icon { width: 25px; height: 25px; color: #dce5eb; }
.service-band .service-icon svg { width: 22px; height: 22px; }
.service-band .service-mini-row article b { font-size: 8.5px; }
.service-band .service-more-btn { display: none; }
.service-band .service-visual {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  margin-left: calc((100vw - min(var(--home-reference-wide), calc(100vw - 64px))) / -2);
  margin-right: 0;
  direction: ltr;
  background: #102736;
}
.service-band .service-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: 58% center;
}
.service-band .service-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,17,25,.20) 0%, rgba(5,17,25,.02) 52%, rgba(5,17,25,.28) 100%);
}
.service-band .service-visual-caption {
  position: absolute;
  z-index: 2;
  left: 28px;
  right: auto;
  bottom: 27px;
  max-width: 260px;
  color: #fff;
  text-align: right;
  text-shadow: 0 4px 18px rgba(0,0,0,.48);
}
.service-band .service-visual-caption b { display:block; font-size: 20px; line-height: 1.5; }
.service-band .service-visual-caption small { display:block; margin-top: 3px; font-size: 7.5px; color: #d5dee4; }
html[data-theme="light"] .service-band { background:#f9fbfc; color:#112b40; }
html[data-theme="light"] .service-band .service-lead { color:#112b40; }
html[data-theme="light"] .service-band .service-copy > p { color:#536a7a; }
html[data-theme="light"] .service-band .service-mini-row article { background:#fff; border-color:#dce5eb; color:#18374f; }
html[data-theme="light"] .service-band .service-icon { color:#174c82; }
html[data-theme="light"] .service-band .service-visual::after {
  background: linear-gradient(90deg, rgba(5,17,25,.12) 0%, rgba(5,17,25,.01) 55%, rgba(249,251,252,.28) 100%);
}

@media (max-width: 1100px) {
  .home-reference-wide { width:min(100% - 32px, var(--home-reference-wide)); }
  .why-section .why-grid { grid-template-columns: repeat(3,1fr); }
  .why-section .why-grid article:nth-child(4),
  .why-section .why-grid article:nth-child(5) { min-height: 106px; }
  .partner-band { background-size: auto, 1000px auto; }
  .partner-band .partner-reference-grid { grid-template-columns:1fr; gap:14px; }
  .partner-band .partner-quote { max-width: 620px; justify-self:end; }
  .partner-band .partner-logo-grid { grid-template-columns:repeat(3,1fr); }
  .service-band .service-reference-grid { grid-template-columns:1fr; }
  .service-band .service-copy { order:1; padding:30px 0; }
  .service-band .service-visual { order:2; min-height:310px; margin-inline:0; }
}

@media (max-width: 680px) {
  .home-reference-wide { width:min(100% - 24px, var(--home-reference-wide)); }
  .why-section { padding:28px 0 30px; }
  .why-section .why-head { text-align:center; margin-bottom:15px; }
  .why-section .why-head h2 { font-size:23px; }
  .why-section .why-head .section-subtitle { font-size:10px; }
  .why-section .why-grid { grid-template-columns:1fr 1fr; gap:9px; }
  .why-section .why-grid article { min-height:120px; padding:14px 8px; }
  .why-section .why-grid article:nth-child(5) { grid-column:1/-1; min-height:104px; }
  .why-section .why-grid h3 { font-size:12px; }
  .why-section .why-grid p { font-size:8px; }

  .partner-band { background-size:auto, 850px auto; }
  .partner-band .partner-reference-grid { padding-block:24px; }
  .partner-band .partner-heading { text-align:center; }
  .partner-band .partner-heading h2 { font-size:23px; }
  .partner-band .partner-logo-grid { grid-template-columns:repeat(3,1fr); }
  .partner-band .partner-logo-card { min-height:66px; }
  .partner-band .partner-quote { width:100%; max-width:none; }

  .service-band .service-reference-grid { width:100%; }
  .service-band .service-copy { padding:30px 18px 24px; text-align:center; align-items:center; }
  .service-band .service-copy h2 { font-size:28px; }
  .service-band .service-lead { font-size:13px; }
  .service-band .service-copy > p { font-size:10px; }
  .service-band .service-mini-row { width:100%; grid-template-columns:1fr; gap:8px; margin-top:17px; }
  .service-band .service-mini-row article { min-height:54px; flex-direction:row; justify-content:flex-start; padding:10px 14px; gap:10px; text-align:right; }
  .service-band .service-mini-row article b { font-size:11px; }
  .service-band .service-icon { color:var(--primary); }
  .service-band .service-more-btn {
    display:inline-flex;
    width:100%;
    justify-content:center;
    align-self:stretch;
    min-height:48px;
    margin-top:16px;
    border:0;
    background:var(--primary);
    color:#fff;
    font-size:11px;
  }
  .service-band .service-visual { min-height:320px; margin:0; }
  .service-band .service-visual > img { min-height:320px; object-position:60% center; }
  .service-band .service-visual-caption { left:20px; bottom:20px; }
  .service-band .service-visual-caption b { font-size:21px; }
}

/* ======================================================================
   Articles + footer CTA — reference fidelity patch v6
   Desktop spacing and physical placement matched to home1/home2.
   ====================================================================== */
@media (min-width: 1121px) {
  /* The reference uses the same wide content rail as the about/partners
     sections instead of the older 1240px global container. */
  .articles-home > .container,
  .footer-cta > .footer-cta-inner {
    width: min(var(--home-reference-wide), calc(100% - 64px));
    max-width: none;
    margin-inline: auto;
  }

  .articles-home {
    padding-top: 44px;
    padding-bottom: 49px;
  }
  .articles-home .section-head {
    margin-bottom: 15px;
  }

  /* In the supplied reference the editorial promo sits on the physical
     right, but its Persian message is placed on the left half of the card
     so the truck remains visible on the right. */
  .article-promo-card > div {
    inset: 0 auto 0 0;
    width: 58%;
    padding: 18px;
    align-items: stretch;
    justify-content: center;
    direction: rtl;
    text-align: right;
  }
  .article-promo-card > div > span,
  .article-promo-card > div > strong,
  .article-promo-card > div > i {
    align-self: flex-start;
  }

  /* Reference CTA: copy at far left, action beside it, image breathing room
     in the middle, and slogan locked to the far right. */
  .footer-cta-inner {
    min-height: 200px;
    grid-template-columns: minmax(245px, 310px) auto 1fr minmax(220px, 280px);
    column-gap: 22px;
    align-items: center;
    direction: ltr;
    overflow: visible;
  }
  .footer-cta-inner > * { direction: rtl; }
  .footer-cta-copy {
    grid-column: 1;
    justify-self: start;
    width: 100%;
    text-align: right;
  }
  .footer-cta-inner > .btn {
    grid-column: 2;
    justify-self: start;
    min-width: 128px;
  }
  .footer-cta-slogan {
    grid-column: 4;
    justify-self: end;
    width: 100%;
    text-align: right;
    align-items: flex-start;
  }

  html[data-theme="dark"] .footer-cta {
    background:
      linear-gradient(90deg, rgba(6,18,27,.76) 0%, rgba(6,18,27,.30) 30%, rgba(6,18,27,.18) 58%, rgba(6,18,27,.66) 100%),
      url('../images/radman/cta-road.webp') center 57% / cover no-repeat;
  }
  html[data-theme="light"] .footer-cta {
    background:
      linear-gradient(90deg, rgba(20,39,54,.58) 0%, rgba(20,39,54,.12) 34%, rgba(20,39,54,.08) 60%, rgba(20,39,54,.48) 100%),
      url('../images/radman/cta-road.webp') center 57% / cover no-repeat;
  }
}

/* ======================================================================
   Unified site container rail — v8
   Keep the homepage, feature strip, catalogue sections and inner pages on
   one desktop content axis.  Mobile/tablet rules above remain untouched.
   ====================================================================== */
:root {
  --container: 1680px;
  --home-reference-wide: 1680px;
  --desktop-page-gutter: 64px;
}

@media (min-width: 1121px) {
  .container,
  .header-inner,
  .home-hero .hero-grid,
  .benefit-grid,
  .home-reference-wide,
  .articles-home > .container,
  .footer-cta > .footer-cta-inner {
    width: min(var(--container), calc(100% - var(--desktop-page-gutter)));
    max-width: none;
    margin-inline: auto;
  }

  /* Do not let the two early homepage overrides create a narrower rail. */
  .home-hero .hero-grid,
  .benefit-grid,
  .header-inner {
    padding-inline: 0;
  }

  /* Page heroes and page bodies now line up with the same site rail. */
  .page-hero > .container,
  .catalog-page-hero > .container,
  .about-page-hero > .container,
  .request-page-hero > .container {
    width: min(var(--container), calc(100% - var(--desktop-page-gutter)));
    max-width: none;
    margin-inline: auto;
  }

  /* The products heading/cards were previously on the old 1240px rail. */
  .products-showcase > .container {
    width: min(var(--container), calc(100% - var(--desktop-page-gutter)));
    max-width: none;
  }
}

/* ======================================================================
   Client-approved content + safe visual overrides — v12
   Keep the reference home layout intact. Only the requested content,
   logo, about video and moderate button sizing are overridden here.
   ====================================================================== */

/* Supplied Radman Diesel gold logo. Keep the original 70px header rhythm. */
.brand-logo-img {
  display:block;
  width:92px;
  height:52px;
  object-fit:contain;
  object-position:center;
  flex:0 0 auto;
}
.footer-brand-logo { width:106px; height:64px; }
.mobile-menu-top .brand-logo-img { width:96px; height:50px; }

@media (min-width:1121px) {
  /* Do not resize the header or nav globally; this preserves the reference. */
  .benefit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .why-section .why-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .partner-band .partner-logo-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .service-band .service-mini-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

.partner-band .mark-mina,
.partner-band .mark-bahman {
  font:900 20px/1 Georgia,serif;
  letter-spacing:-.04em;
}

/* About-page video upload output. */
.about-video-section {
  padding-top:18px;
  padding-bottom:72px;
}
.about-video-head { margin-bottom:18px; }
.about-video-head h2 {
  margin:7px 0 0;
  font-size:clamp(24px,2.3vw,34px);
  line-height:1.45;
}
.about-video-card {
  width:min(1080px,100%);
  margin-inline:auto;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:#050b10;
  box-shadow:var(--shadow-sm);
}
.about-video-card video {
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  max-height:680px;
  object-fit:contain;
  background:#000;
}

/* Buttons: moderately smaller, without shrinking typography or changing layouts. */
.btn {
  min-height:42px;
  padding:8px 17px;
  gap:8px;
  border-radius:9px;
}
.header-cta {
  min-height:37px;
  padding:6px 15px;
  border-radius:7px;
}
.home-hero .hero-actions .btn,
.footer-cta-inner .btn,
.request-closing-card .btn,
.detail-actions .btn,
.catalog-toolbar .btn,
.service-more-btn,
.about-more {
  min-height:40px;
  padding:7px 15px;
  border-radius:7px;
}

@media (max-width:620px) {
  .brand-logo-img { width:82px; height:43px; }
  .mobile-menu-top .brand-logo-img { width:96px; height:49px; }
  .footer-brand-logo { width:100px; height:58px; }
  .benefit-grid { grid-template-columns:1fr 1fr; }
  .service-band .service-mini-row { grid-template-columns:1fr; }

  .about-video-section { padding:8px 0 46px; }
  .about-video-head { margin-bottom:12px; }
  .about-video-head h2 { font-size:20px; }
  .about-video-card { border-radius:10px; }

  .btn { min-height:39px; padding:7px 14px; }
  .home-hero .hero-actions .btn,
  .mobile-menu-actions .btn { min-height:38px; }
}

/* v14 — restore light/dark switch in the header.
   The theme functionality always remained in site.js; earlier reference-polish
   rules only hid the control visually. Keep the switch available on all sizes. */
.site-header > .header-inner .theme-toggle {
  display:grid !important;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:50%;
  border:1px solid color-mix(in srgb, var(--line) 82%, transparent);
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  color:var(--text);
}
.site-header > .header-inner .theme-toggle:hover {
  border-color:var(--primary);
  color:var(--primary);
}
.site-header > .header-inner .theme-toggle .theme-icon {
  font-size:15px;
  line-height:1;
}
html[data-theme="dark"] .site-header > .header-inner .theme-toggle {
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.14);
  color:#eef5f9;
}

@media (max-width:1120px) {
  .site-header > .header-inner .theme-toggle { display:grid !important; }
}

@media (max-width:620px) {
  .site-header > .header-inner .theme-toggle {
    display:grid !important;
    width:34px;
    height:34px;
    flex-basis:34px;
    border:0;
    background:transparent;
  }
  .home-page .site-header > .header-inner .theme-toggle { color:#fff; }
}


/* ======================================================================
   v15 — hero collision + four feature cards + clean product photography
   ====================================================================== */

/* Keep the small value rail clear of the main hero headline on desktop.
   Use physical right/left offsets because this block is RTL. */
@media (min-width:1121px) {
  .home-hero .hero-copy {
    width:100%;
    max-width:620px;
    padding-right:118px;
    padding-left:0;
  }
  .home-hero .hero-copy p {
    max-width:500px;
  }
  .hero-side-values {
    right:18px;
    left:auto;
    inset-inline-start:auto;
    inset-inline-end:auto;
    top:146px;
    width:88px;
    z-index:6;
    font-size:9px;
    line-height:1.7;
    white-space:nowrap;
    pointer-events:none;
  }

  /* Restore the original four-item value strip. */
  .benefit-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* Product photography should not be dimmed when the site is in dark mode.
   The card shell stays dark, while the actual product image uses a neutral
   studio field with no navy veil or brightness reduction. */
html[data-theme="dark"] .product-image,
html[data-theme="dark"] .main-product-image,
html[data-theme="dark"] .main-product-image img {
  background:#edf2f5 !important;
}
html[data-theme="dark"] .product-image::after,
html[data-theme="dark"] .main-product-image::after {
  display:none !important;
  content:none !important;
  background:none !important;
}
html[data-theme="dark"] .product-image img,
html[data-theme="dark"] .product-card:hover .product-image img,
html[data-theme="dark"] .main-product-image img {
  filter:none !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
}

/* Keep gallery thumbnails equally clean. */
html[data-theme="dark"] .gallery-thumbs button,
html[data-theme="dark"] .gallery-thumbs img {
  background:#edf2f5;
}
html[data-theme="dark"] .gallery-thumbs img {
  filter:none !important;
  opacity:1 !important;
}

/* ======================================================================
   v16 — Home category media containment
   Keep vehicle artwork completely inside the image well so it never
   visually runs underneath the title/description area.
   ====================================================================== */
.home-page .products-showcase .category-card {
  overflow: hidden;
  isolation: isolate;
}
.home-page .products-showcase .category-visual {
  position: relative;
  z-index: 1;
  height: 176px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.home-page .products-showcase .category-visual img {
  display: block;
  width: 94% !important;
  height: 94% !important;
  max-width: 94% !important;
  max-height: 94% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  margin: auto;
}
.home-page .products-showcase .category-card:hover .category-visual img {
  transform: scale(1.015) !important;
}
.home-page .products-showcase .category-copy {
  position: relative;
  z-index: 4;
  flex: 1 0 auto;
  background: var(--surface);
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.home-page .products-showcase .card-arrow {
  z-index: 5;
}
html[data-theme="dark"] .home-page .products-showcase .category-copy {
  background: #0a1b27;
}

@media (max-width: 620px) {
  .home-page .products-showcase .category-visual {
    height: 105px;
  }
  .home-page .products-showcase .category-visual img {
    width: 92% !important;
    height: 92% !important;
    max-width: 92% !important;
    max-height: 92% !important;
    transform: none !important;
  }
  .home-page .products-showcase .category-card:hover .category-visual img {
    transform: none !important;
  }
}

/* ======================================================================
   v17 — Home product cards: keep artwork visibly clear of the copy area
   The category images must never touch/appear to continue beneath the
   title/description divider. Reserve an explicit bottom breathing space.
   ====================================================================== */
.home-page .products-showcase .category-visual {
  height: 184px !important;
  padding: 10px 18px 22px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.home-page .products-showcase .category-visual img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 148px !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  margin: 0 auto !important;
}
.home-page .products-showcase .category-card:hover .category-visual img {
  transform: none !important;
}
.home-page .products-showcase .category-copy {
  position: relative !important;
  z-index: 10 !important;
  margin-top: 0 !important;
  background-clip: padding-box !important;
}

@media (max-width: 620px) {
  .home-page .products-showcase .category-visual {
    height: 105px !important;
    padding: 8px 8px 12px !important;
  }
  .home-page .products-showcase .category-visual img {
    max-height: 85px !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* ======================================================================
   v18 — Catalog listing product media containment
   Keep /products/ artwork fully inside its media well with visible
   breathing room before the product title/copy area.
   ====================================================================== */
.products-page .product-card {
  overflow: hidden !important;
  isolation: isolate;
}

.products-page .product-image {
  position: relative !important;
  z-index: 1;
  height: 222px !important;
  padding: 12px 18px 28px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.products-page .product-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 178px !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.products-page .product-card:hover .product-image img {
  transform: none !important;
}

.products-page .product-body {
  position: relative !important;
  z-index: 5 !important;
  margin-top: 0 !important;
  background: var(--surface) !important;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

html[data-theme="dark"] .products-page .product-body {
  background: #0d202d !important;
}

@media (max-width: 620px) {
  .products-page .product-image {
    height: 100% !important;
    min-height: 170px !important;
    padding: 12px !important;
  }

  .products-page .product-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 146px !important;
    transform: none !important;
  }
}


/* v19 — restore Services link and compact action buttons only on consultation/contact. */
/* Keep global/home buttons untouched; these overrides are intentionally page-scoped. */
.consultation-page-hero + .request-intro-section ~ .request-form-section .request-submit,
.request-form-section .request-submit {
  min-width: 0;
  width: auto;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 10px;
  gap: 6px;
  box-shadow: none;
}
.request-closing-card .btn {
  width: auto;
  min-height: 36px;
  padding: 6px 13px;
  border-radius: 7px;
  font-size: 9.5px;
}
.contact-grid .contact-form-card .btn,
.contact-grid .contact-info-card .btn {
  width: auto;
  min-width: 0;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 10px;
  gap: 6px;
  box-shadow: none;
}
.contact-grid .contact-info-card .btn-block {
  display: inline-flex;
  width: auto;
  align-self: flex-start;
}

/* Extra nav item: keep desktop header balanced without removing any page link. */
@media (min-width:1121px) {
  .desktop-nav { gap: 2px; }
  .desktop-nav a { padding-inline: 8px; font-size: 10.8px; }
  .desktop-nav a.active::after,
  .desktop-nav a:hover::after { inset-inline: 7px; }
}

@media (max-width:620px) {
  .request-form-section .request-submit,
  .request-closing-card .btn,
  .contact-grid .contact-form-card .btn,
  .contact-grid .contact-info-card .btn {
    width: auto;
    min-height: 35px;
    padding: 6px 12px;
    font-size: 9.5px;
  }
}

/* ======================================================================
   v20 — compact form/action buttons on Contact, Consultation, After-sales
   Flex-column forms stretch auto-width children by default. The previous
   rules reduced height/padding but did not stop that stretch, so submit
   buttons still rendered as full-width bars. Keep them content-sized.
   ====================================================================== */
.contact-grid .contact-form-card form > .btn,
.request-form-section .request-form-card form > .btn,
.service-faq-section .btn,
.request-closing-card .btn {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100%;
  min-height: 36px !important;
  padding: 6px 14px !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  line-height: 1.4;
  gap: 6px !important;
  align-self: flex-start !important;
  box-shadow: none !important;
}

/* RTL forms: put the compact submit button on the visual right. */
.contact-grid .contact-form-card form,
.request-form-section .request-form-card form {
  align-items: stretch;
}
.contact-grid .contact-form-card form > .btn,
.request-form-section .request-form-card form > .btn {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

/* Contact directions button should also stay compact. */
.contact-grid .contact-info-card .btn,
.contact-grid .contact-info-card .btn-block {
  width: fit-content !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 6px 13px !important;
  font-size: 9.5px !important;
  align-self: flex-start !important;
}

@media (max-width:620px) {
  .contact-grid .contact-form-card form > .btn,
  .request-form-section .request-form-card form > .btn,
  .service-faq-section .btn,
  .request-closing-card .btn,
  .contact-grid .contact-info-card .btn {
    width: fit-content !important;
    min-height: 35px !important;
    padding: 6px 12px !important;
    font-size: 9.5px !important;
  }
}

/* Social links — crisp inline SVG icons, no external icon font/CDN. */
.footer-grid .social-row { gap:9px; align-items:center; }
.footer-grid .social-row .social-link {
  width:38px;
  height:38px;
  padding:0;
  border:1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius:11px;
  color:color-mix(in srgb, var(--text) 62%, transparent);
  background:color-mix(in srgb, var(--surface-2) 42%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  overflow:hidden;
  transition:transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.footer-grid .social-row .social-link .social-icon {
  width:17px;
  height:17px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.footer-grid .social-row .social-link .social-icon-fill-only {
  fill:currentColor;
  stroke:none;
}
.footer-grid .social-row .social-link .social-icon-fill {
  fill:currentColor;
  stroke:none;
}
.footer-grid .social-row .social-link:hover {
  transform:translateY(-2px);
  color:var(--primary);
  border-color:color-mix(in srgb, var(--primary) 70%, var(--line));
  background:color-mix(in srgb, var(--primary) 8%, var(--surface));
  box-shadow:0 8px 22px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.06);
}
.footer-grid .social-row .social-link:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:3px;
}
@media (max-width: 640px) {
  .footer-grid .social-row .social-link { width:36px; height:36px; border-radius:10px; }
  .footer-grid .social-row .social-link .social-icon { width:16px; height:16px; }
}

/* ======================================================================
   v22 — mobile horizontal-overflow hardening
   Keep every page inside the device viewport while preserving intentional
   component-level scrolling (gallery thumbs / rich tables).
   ====================================================================== */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

main,
.site-header,
.site-footer,
.footer-cta,
.hero-shell,
.page-hero,
.section {
  max-width: 100%;
}

/* Dynamic content must be allowed to shrink inside grid/flex tracks. */
.header-inner > *,
.hero-grid > *,
.page-hero-grid > *,
.product-detail-grid > *,
.product-content-grid > *,
.about-page-grid > *,
.contact-grid > *,
.form-grid > *,
.request-hero-grid > *,
.request-layout > *,
.request-benefit-grid > *,
.service-page-grid > *,
.service-process-grid > *,
.footer-grid > *,
.article-reference-grid > *,
.article-grid > *,
.product-grid > *,
.catalog-grid > *,
.category-grid > * {
  min-width: 0;
}

input,
select,
textarea,
button {
  max-width: 100%;
  min-width: 0;
}

/* User/admin-entered copy, model codes, URLs and long Latin strings. */
.rich-content,
.article-rich,
.product-info-panel,
.product-body,
.article-body,
.contact-items,
.request-side-card,
.footer-grid {
  overflow-wrap: anywhere;
}

.rich-content pre,
.article-rich pre,
.rich-content table,
.article-rich table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rich-content pre,
.article-rich pre {
  white-space: pre-wrap;
  word-break: break-word;
}
.rich-content iframe,
.article-rich iframe,
.rich-content video,
.article-rich video {
  display: block;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 900px) {
  .container,
  .narrow,
  .header-inner,
  .home-hero .hero-grid,
  .benefit-grid,
  .home-reference-wide {
    max-width: calc(100% - 24px);
  }

  /* Desktop full-bleed calculations use 100vw and negative margins.
     On tablet/mobile they become ordinary in-flow media blocks. */
  .service-visual,
  .service-reference-grid .service-visual,
  .service-band .service-visual {
    width: 100%;
    max-width: 100%;
    margin-inline: 0 !important;
  }

  .catalog-toolbar,
  .search-box,
  .detail-actions,
  .request-closing-card,
  .footer-bottom {
    max-width: 100%;
    min-width: 0;
  }

  .gallery-thumbs {
    width: 100%;
    max-width: 100%;
    overscroll-behavior-inline: contain;
  }
}

@media (max-width: 620px) {
  .container,
  .narrow {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-inline: auto !important;
  }

  .header-inner {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  .home-hero .hero-grid,
  .benefit-grid,
  .home-reference-wide {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-inline: auto !important;
  }

  .home-hero,
  .home-hero .hero-grid,
  .page-hero,
  .request-page-hero,
  .products-showcase,
  .about-home,
  .why-section,
  .partner-band,
  .service-band,
  .articles-home,
  .footer-cta,
  .site-footer {
    max-width: 100%;
    overflow-x: clip;
  }

  /* A previous mobile full-bleed rule used negative side margins. It was
     visually useful but could expand the document on narrow devices. */
  .service-reference-grid .service-visual,
  .service-band .service-visual {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .mobile-menu-panel {
    width: min(390px, 100%) !important;
    max-width: 100% !important;
  }

  .mobile-menu-search,
  .mobile-menu-search input,
  .catalog-toolbar,
  .catalog-toolbar > *,
  .search-box,
  .search-box input,
  .contact-form-card,
  .contact-info-card,
  .request-form-card,
  .request-side-card,
  .content-card,
  .spec-card,
  .price-box {
    min-width: 0;
    max-width: 100%;
  }

  .hero-brand-line {
    max-width: 100%;
    white-space: normal;
    flex-wrap: wrap;
  }

  .product-meta,
  .info-tags,
  .article-meta,
  .breadcrumbs,
  .category-chips,
  .trust-row,
  .request-hero-points,
  .social-row {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .product-meta > *,
  .info-tags > *,
  .article-meta > *,
  .breadcrumbs > *,
  .category-chips > *,
  .request-hero-points > * {
    min-width: 0;
    max-width: 100%;
  }

  .page-hero h1,
  .request-page-hero h1,
  .product-info-panel h1,
  .article-detail-hero h1,
  .section-head h2,
  .request-form-card h2,
  .request-side-card h2 {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .rich-content table,
  .article-rich table {
    display: block;
    width: 100%;
  }
}

/* ======================================================================
   v23 — fix real mobile document overflow
   The closed mobile drawer used transform: translateX(-100%), which kept
   the panel outside the viewport and expanded the body's scrollable area.
   Clip the drawer inside its fixed overlay and close it toward the right.
   ====================================================================== */
@media (max-width: 1120px) {
  .mobile-menu {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    contain: paint;
    overscroll-behavior: contain;
  }

  .mobile-menu-panel {
    transform: translate3d(100%, 0, 0) !important;
    will-change: transform;
  }

  .mobile-menu.open .mobile-menu-panel {
    transform: translate3d(0, 0, 0) !important;
  }
}

/* ======================================================================
   v24 — mobile promo headline contrast
   Keep the desktop treatment intact; on narrow screens the promo copy can
   sit directly over the truck image, so give it guaranteed contrast.
   ====================================================================== */
@media (max-width: 620px) {
  .article-promo-card {
    background:
      linear-gradient(90deg, rgba(5,18,28,.94) 0%, rgba(5,18,28,.78) 58%, rgba(5,18,28,.34) 100%),
      var(--promo-image) center/cover no-repeat !important;
  }

  .article-promo-card > div {
    padding: 18px !important;
    justify-content: center;
  }

  .article-promo-card span {
    color: #f12735 !important;
    font-size: 12px;
    font-weight: 900;
    text-shadow: 0 1px 8px rgba(0,0,0,.28);
  }

  .article-promo-card strong,
  html[data-theme="dark"] .article-promo-card strong {
    color: #fff !important;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.42;
    text-shadow: 0 2px 12px rgba(0,0,0,.55);
  }

  .article-promo-card i {
    background: #f12735 !important;
  }
}

/* ======================================================================
   v25 — mobile dark-mode benefit strip
   The mobile reference rules forced this section and its cards to white,
   even when the site followed the phone's dark color scheme.
   ====================================================================== */
@media (max-width: 620px) {
  html[data-theme="dark"] .benefit-strip {
    background: #07141e !important;
    border-color: #1c3444 !important;
  }

  html[data-theme="dark"] .benefit-grid article {
    background: #0c1b27 !important;
    color: #eff6fb !important;
    border-color: #1c3444 !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
  }

  html[data-theme="dark"] .benefit-grid article + article,
  html[data-theme="dark"] .benefit-grid article:nth-child(3),
  html[data-theme="dark"] .benefit-grid article:nth-child(4) {
    border-color: #1c3444 !important;
  }

  html[data-theme="dark"] .benefit-grid b {
    color: #f3f7fa !important;
  }

  html[data-theme="dark"] .benefit-grid small {
    color: #9fb0bc !important;
  }

  html[data-theme="dark"] .benefit-icon {
    color: #f12735 !important;
  }
}

/* ======================================================================
   v26 — compact mobile home hero
   The mobile hero was visually taller than necessary and left a large gap
   between the lead copy and the CTA stack. Keep the cinematic crop, but
   make the first screen substantially shorter on phones.
   ====================================================================== */
@media (max-width: 620px) {
  .home-hero,
  .home-hero .hero-grid {
    min-height: 540px !important;
  }

  @supports (height: 1svh) {
    .home-hero,
    .home-hero .hero-grid {
      min-height: clamp(510px, 68svh, 550px) !important;
    }
  }

  .home-hero .hero-copy {
    min-height: 540px !important;
    padding-top: 84px !important;
  }

  @supports (height: 1svh) {
    .home-hero .hero-copy {
      min-height: clamp(510px, 68svh, 550px) !important;
    }
  }

  .home-hero .hero-copy p {
    margin-top: 7px !important;
  }

  .home-hero .hero-actions {
    bottom: 54px !important;
  }

  .home-hero .hero-copy::after {
    bottom: 17px !important;
  }

  .home-hero .hero-copy::before {
    bottom: 9px !important;
  }

  .home-hero .hero-media {
    background-position: 31% 48% !important;
  }
}

/* ======================================================================
   v26 — robust mobile menu viewport drawer
   Keep the off-canvas layer outside the filtered header (template change)
   and anchor the drawer to the real viewport. This avoids iOS/Chrome
   treating the fixed menu as a 64px-high child of the header.
   ====================================================================== */
@media (max-width: 1120px) {
  .mobile-menu {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 2200 !important;
    overflow: hidden !important;
    contain: layout paint;
    pointer-events: none;
  }

  .mobile-menu.open {
    pointer-events: auto;
  }

  .mobile-menu-panel {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: min(390px, 100%) !important;
    height: 100% !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transform: translate3d(-102%, 0, 0) !important;
    will-change: transform;
  }

  .mobile-menu.open .mobile-menu-panel {
    transform: translate3d(0, 0, 0) !important;
  }
}


/* v29 — fix reversed icon order in mobile drawer */
@media (max-width: 900px) {
  .mobile-nav a { grid-template-columns: auto 1fr 28px !important; }
  .mobile-nav .mobile-nav-chevron { grid-column: 1; color:#738894; font-size:17px; font-weight:700; line-height:1; }
  .mobile-nav .mobile-nav-label { grid-column: 2; width:auto !important; color:inherit !important; font-size:10.5px !important; justify-self:end; text-align:right !important; }
  .mobile-nav .mobile-nav-icon { grid-column: 3; width:26px !important; text-align:center !important; color:var(--primary) !important; font-size:14px !important; }
  .mobile-menu-social { flex-direction: row-reverse; }
}


/* v30 — better mobile menu icons and outward chevrons */
@media (max-width: 900px) {
  .mobile-nav a { grid-template-columns: auto 1fr 30px !important; align-items:center !important; }
  .mobile-nav .mobile-nav-chevron { grid-column:1; width:18px; height:18px; display:grid; place-items:center; }
  .mobile-nav .mobile-nav-chevron svg { width:14px; height:14px; fill:none; stroke:#7e92a0; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-nav .mobile-nav-label { grid-column:2; width:auto !important; color:inherit !important; font-size:10.7px !important; justify-self:end; text-align:right !important; }
  .mobile-nav .mobile-nav-icon { grid-column:3; width:30px !important; height:30px; display:grid; place-items:center; text-align:center !important; color:var(--primary) !important; }
  .mobile-nav .mobile-nav-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-menu-social { flex-direction: row-reverse; gap:12px; }
  .mobile-social-link { width:30px; height:30px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:50%; color:#b8c5ce; background:rgba(255,255,255,.02); transition:.2s ease; }
  .mobile-social-link:hover { color:var(--primary); border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.05); }
  .mobile-social-link .social-icon { width:14px; height:14px; }
}


/* v31 — improve mobile social icon visibility */
@media (max-width: 900px) {
  .mobile-menu-social { margin-top:20px; }
  .mobile-social-link { color:#f3f7fa !important; border-color:rgba(255,255,255,.22) !important; background:rgba(255,255,255,.035) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
  .mobile-social-link .social-icon { width:14px; height:14px; display:block; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-social-link .social-icon-fill-only { width:14px; height:14px; display:block; fill:currentColor; stroke:none; }
  .mobile-social-link .social-icon-fill { fill:currentColor; stroke:none; }
  .mobile-social-link:hover, .mobile-social-link:focus-visible { color:var(--primary) !important; border-color:rgba(255,255,255,.34) !important; background:rgba(255,255,255,.06) !important; }
}

/* ======================================================================
   v32 — remove phantom mobile hero height
   hero-art is a desktop composition spacer. On phones the grid becomes a
   block, so its old 250px min-height was being added below the real hero.
   ====================================================================== */
@media (max-width: 620px) {
  .home-hero .hero-art {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
  }

  .home-hero,
  .home-hero .hero-grid,
  .home-hero .hero-copy {
    min-height: 520px !important;
  }

  @supports (height: 1svh) {
    .home-hero,
    .home-hero .hero-grid,
    .home-hero .hero-copy {
      min-height: clamp(500px, 66svh, 525px) !important;
    }
  }

  .home-hero .hero-copy {
    padding-top: 82px !important;
  }

  .home-hero .hero-actions {
    bottom: 52px !important;
  }

  .home-hero .hero-copy::after {
    bottom: 16px !important;
  }

  .home-hero .hero-copy::before {
    bottom: 8px !important;
  }
}

/* v32 — optical alignment for the mobile light/dark icon */
@media (max-width: 620px) {
  .site-header > .header-inner .theme-toggle .theme-icon {
    transform: translateY(2px);
  }
}

/* v33 — remove product search icon from the mobile header */
@media (max-width: 620px) {
  .site-header .header-search,
  .home-page .site-header .header-search {
    display: none !important;
  }

  .site-header .header-actions {
    gap: 6px;
  }
}