/* ================================================================
   ALTRAD SPAR — Premium Industrial Homepage (V.1.0)
   Built on the Altrad SPAR Steel Design System V.1.2.
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-app);
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
section { position: relative; }

/* ---------- Shared helpers ---------- */
.wrap        { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.wrap-wide   { max-width: 1440px; margin: 0 auto; padding: 0 40px; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--altrad-red); margin: 0;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 24px; height: 2px;
  background: var(--altrad-red); display: inline-block;
}
.eyebrow.plain::before { display: none; }
.eyebrow.on-dark { color: #ff6168; }

.display {
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.98;
  margin: 0;
}
.body-l { font-size: 18px; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.body-m { font-size: 15px; line-height: 1.65; color: var(--fg-2); text-wrap: pretty; }
.mono   { font-family: var(--font-mono); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-2); color: var(--fg-2);
  text-transform: uppercase; letter-spacing: 0.06em; background: white;
}
.pill.red  { background: var(--altrad-red); color: white; border-color: var(--altrad-red); }
.pill.dark { background: var(--steel-900); color: white; border-color: var(--steel-900); }
.pill.ghost{ background: transparent; color: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.30); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 26px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; border-radius: 4px;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.btn .arr { font-family: var(--font-mono); font-size: 14px; transition: transform 200ms var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }

.btn-primary { background: var(--altrad-red); color: white; border: 1px solid var(--altrad-red); }
.btn-primary:hover { background: var(--altrad-red-dark); border-color: var(--altrad-red-dark); }

.btn-ghost-dark { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.40); }
.btn-ghost-dark:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.70); }

.btn-ghost { background: transparent; color: var(--fg-1); border: 1px solid var(--border-2); }
.btn-ghost:hover { border-color: var(--fg-1); background: var(--steel-50); }

.btn-white { background: white; color: var(--altrad-red-deep); border: 1px solid white; }
.btn-white:hover { background: var(--altrad-red-tint); }

.btn-sm { height: 40px; padding: 0 18px; font-size: 11px; }

/* Inline "more" link */
.more-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--altrad-red);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--altrad-red);
  transition: gap 200ms var(--ease-out), color 160ms var(--ease-out);
}
.more-link:hover { gap: 14px; color: var(--altrad-red-dark); }
.more-link.on-dark { color: white; border-bottom-color: white; }
.more-link.on-dark:hover { color: white; }

/* ---------- Utility top bar ---------- */
.util-top {
  background: var(--steel-900); color: var(--steel-300);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; height: 38px;
  display: flex; align-items: center;
}
.util-top .wrap-wide {
  display: flex; justify-content: space-between; align-items: center;
}
.util-top .left, .util-top .right { display: flex; gap: 24px; align-items: center; }
.util-top .left .loc { color: white; display: inline-flex; align-items: center; gap: 10px; }
.util-top .left .loc::before { content: ""; width: 6px; height: 6px; background: var(--altrad-red); display: inline-block; }
.util-top .left .pulse { color: var(--steel-400); display: inline-flex; gap: 10px; align-items: center; }
.util-top .left .pulse .dot {
  width: 7px; height: 7px; background: #22c55e; border-radius: 999px; display: inline-block;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
  animation: pulse-green 1.8s ease-out infinite;
}
@keyframes pulse-green {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.util-top a:hover { color: white; }
.util-top .lang { display: inline-flex; align-items: center; gap: 0; }
.util-top .lang span { padding: 3px 9px; cursor: pointer; }
.util-top .lang .on { background: var(--altrad-red); color: white; }

/* ---------- Header ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-1);
  height: 84px;
  display: flex; align-items: center;
  transition: height 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
header.site.shrunk { height: 68px; box-shadow: var(--shadow-2); }
header.site .wrap-wide { display: flex; align-items: center; gap: 36px; }
header.site .logo { display: flex; align-items: center; gap: 14px; }
header.site .logo .primary-logo {
  height: 44px; width: auto; display: block;
  transition: height 200ms;
}
header.site.shrunk .logo .primary-logo { height: 36px; }
header.site nav.primary {
  display: flex; gap: 30px; flex: 1; align-items: center;
  margin-left: 24px;
}
header.site nav.primary a {
  font-size: 12px; font-weight: 600; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--fg-2);
  padding: 30px 0; position: relative;
  transition: color 120ms var(--ease-out);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
header.site nav.primary a:hover { color: var(--fg-1); }
header.site nav.primary a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -1px;
  height: 2px; background: var(--altrad-red);
  transition: right 240ms var(--ease-out);
}
header.site nav.primary a:hover::after,
header.site nav.primary a.active::after { right: 0; }
header.site nav.primary a.active { color: var(--fg-1); }
header.site nav.primary a .caret {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-3);
}
header.site .header-cta {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 22px;
  background: var(--altrad-red); color: white;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: 4px;
  transition: background 160ms var(--ease-out);
}
header.site .header-cta:hover { background: var(--altrad-red-dark); }
header.site .search {
  width: 38px; height: 38px; border: 1px solid var(--border-1);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 2px; color: var(--fg-2);
  font-family: var(--font-mono); font-size: 13px;
  transition: border-color 160ms;
}
header.site .search:hover { border-color: var(--fg-1); color: var(--fg-1); }

/* ---------- Certification ticker ---------- */
.ticker {
  background: var(--steel-50); border-bottom: 1px solid var(--border-1);
  overflow: hidden; height: 46px;
  display: flex; align-items: center;
  position: relative;
}
.ticker .marquee {
  display: flex; gap: 0; white-space: nowrap;
  animation: marquee 60s linear infinite;
  will-change: transform;
}
.ticker .marquee .item {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.10em; color: var(--fg-2);
  text-transform: uppercase;
  padding: 0 28px; border-right: 1px solid var(--border-1);
  display: inline-flex; align-items: center; gap: 10px;
}
.ticker .marquee .item b { color: var(--altrad-red); font-weight: 600; }
.ticker .marquee .item .dot { width: 6px; height: 6px; background: var(--altrad-red); display: inline-block; }
.ticker:hover .marquee { animation-play-state: paused; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ================================================================
   HERO — cinematic full-bleed, premium / decluttered
   ================================================================ */
.hero {
  position: relative; background: var(--steel-900); color: white;
  height: calc(100vh - 122px); min-height: 600px; overflow: hidden;
  display: flex; flex-direction: column;
}
@supports (height: 100svh) {
  .hero { height: calc(100svh - 122px); }
}
.hero .hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.04);
  opacity: 0;
  transition: opacity 1400ms var(--ease-out);
}
.hero .hero-bg.active {
  opacity: 1;
  animation: kenburns 16s var(--ease-out) forwards;
}
@keyframes kenburns {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.14) translate(-1%, -1%); }
}
.hero .hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(8,10,14,0.94) 0%, rgba(8,10,14,0.78) 35%, rgba(8,10,14,0.40) 70%, rgba(8,10,14,0.20) 100%),
    linear-gradient(180deg, rgba(8,10,14,0.20) 0%, rgba(8,10,14,0.80) 100%);
  z-index: 1;
}
.hero .hero-grid-overlay {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
}
.hero .wrap-wide { flex: 1; display: flex; align-items: center; min-height: 0; padding-bottom: 50px; }
.hero .hero-inner {
  position: relative; z-index: 2; width: 100%;
  padding: 24px 0 0;
  display: grid; grid-template-columns: 1.7fr 1fr; gap: 56px;
  align-items: end;
}
.hero .col-left { padding-bottom: 0; }
.hero .eyebrow-row {
  display: flex; align-items: center; gap: 18px; margin-bottom: 5px;
}
.hero .eyebrow-row .eyebrow { color: #ff6168; font-size: 12px; }
.hero .eyebrow-row .eyebrow::before { background: #ff6168; }

.hero h1.display {
  font-size: clamp(44px, 6.2vw, 88px);
  line-height: 0.94; color: white;
  max-width: 960px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero h1.display .red { color: var(--altrad-red); }
.hero .hero-sub {
  margin-top: 20px; font-size: 16px; line-height: 1.55;
  color: rgba(255,255,255,0.78); max-width: 580px;
}
.hero .hero-ctas {
  margin-top: 24px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}

/* Right column — single proof card */
.hero .col-right { padding-bottom: 0; }
.hero .proof-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 22px 24px 20px;
  position: relative;
  max-width: 400px;
  margin-left: auto;
}
.hero .proof-card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 56px;
  background: var(--altrad-red);
}
.hero .proof-card .row-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.hero .proof-card .lbl {
  font-family: var(--font-mono); font-size: 10.5px;
  color: rgba(255,255,255,0.60); text-transform: uppercase;
  letter-spacing: 0.14em;
}
.hero .proof-card .badge {
  font-family: var(--font-mono); font-size: 9.5px;
  color: #ff6168; border: 1px solid rgba(255,97,104,0.50);
  padding: 3px 8px; letter-spacing: 0.08em;
}
.hero .proof-card .v {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(48px, 4.6vw, 64px); line-height: 0.92;
  letter-spacing: -0.02em; text-transform: uppercase;
  color: white;
}
.hero .proof-card .v .u {
  color: rgba(255,255,255,0.55); font-size: 18px;
  margin-left: 8px; letter-spacing: 0;
  font-family: var(--font-mono); font-weight: 500;
}
.hero .proof-card .desc {
  color: rgba(255,255,255,0.65); font-size: 13px;
  line-height: 1.55; margin: 14px 0 18px 0;
}
.hero .proof-card .row-bot {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 22px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero .proof-card .row-bot .k {
  display: block;
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(255,255,255,0.50); letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 6px;
}
.hero .proof-card .row-bot .vv {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; text-transform: uppercase; letter-spacing: 0;
  color: white;
  display: inline-flex; align-items: center; gap: 8px;
}
.hero .proof-card .row-bot .vv.ok { color: #22c55e; }
.hero .proof-card .row-bot .vv .dot {
  width: 7px; height: 7px; background: #22c55e;
  border-radius: 999px; display: inline-block;
  animation: pulse-live 1.6s ease-in-out infinite;
}

/* Hero footer strip */
.hero .hero-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 3;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: 10px 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}
.hero .hero-foot .wrap-wide {
  display: flex; justify-content: space-between; align-items: center;
  gap: 40px;
}
.hero .img-caption {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.hero .img-caption .k { color: rgba(255,255,255,0.45); }
.hero .img-caption .v { color: white; transition: opacity 320ms; }
.hero .img-caption::before {
  content: ""; width: 32px; height: 1px; background: rgba(255,255,255,0.30);
  display: inline-block;
}

.hero .rot-ui.inline {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-mono);
}
.hero .rot-ui.inline .ctr {
  font-size: 11px; color: rgba(255,255,255,0.55);
  letter-spacing: 0.14em;
}
.hero .rot-ui.inline .dots { display: flex; gap: 8px; }
.hero .rot-ui.inline .dots span {
  width: 28px; height: 2px; background: rgba(255,255,255,0.18);
  cursor: pointer; position: relative; overflow: hidden;
  transition: background 200ms;
}
.hero .rot-ui.inline .dots span:hover { background: rgba(255,255,255,0.35); }
.hero .rot-ui.inline .dots span.active { background: rgba(255,255,255,0.30); }
.hero .rot-ui.inline .dots span.active::after {
  content: ""; position: absolute; inset: 0; background: var(--altrad-red);
  animation: dot-progress 6s linear forwards;
  transform-origin: left;
}
@keyframes dot-progress {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

.hero .scroll-hint {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  transition: color 160ms;
}
.hero .scroll-hint:hover { color: white; text-decoration: none; }
.hero .scroll-hint .line {
  width: 1px; height: 20px; background: rgba(255,255,255,0.30);
  position: relative; overflow: hidden;
}
.hero .scroll-hint .line::after {
  content: ""; position: absolute; left: 0; top: -100%;
  width: 100%; height: 60%; background: white;
  animation: scroll-line 1.8s ease-in-out infinite;
}
@keyframes scroll-line {
  0%   { top: -100%; }
  100% { top: 100%; }
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
  50% { opacity: 0.5; box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* ================================================================
   TRUST STRIP — certifications
   ================================================================ */
.trust {
  background: white; padding: 56px 0;
  border-bottom: 1px solid var(--border-1);
}
.trust .wrap-wide { display: grid; grid-template-columns: 1fr 3fr; gap: 64px; align-items: center; }
.trust .head { border-right: 1px solid var(--border-1); padding-right: 64px; }
.trust .head .eyebrow { font-size: 11px; }
.trust .head h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 30px; text-transform: uppercase; letter-spacing: -0.005em;
  line-height: 1.0; margin: 14px 0 0 0;
}
.trust .badges {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
}
.trust .badge {
  padding: 16px 14px;
  border-right: 1px solid var(--border-1);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: background 160ms;
}
.trust .badge:last-child { border-right: none; }
.trust .badge:hover { background: var(--steel-50); }
.trust .badge .mark {
  width: 48px; height: 48px;
  border: 1.5px solid var(--altrad-red);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0; color: var(--altrad-red);
  line-height: 1;
  border-radius: 50%;
  transition: background 160ms, color 160ms;
}
.trust .badge:hover .mark { background: var(--altrad-red); color: white; }
.trust .badge .mark.sq { border-radius: 0; }
.trust .badge .n {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--fg-1);
  line-height: 1;
}
.trust .badge .sub {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-3);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ================================================================
   INTRO — manifesto / strategy positioning
   ================================================================ */
.intro { background: white; padding: 128px 0 96px; }
.intro .wrap-wide { display: grid; grid-template-columns: 1fr 1.2fr; gap: 96px; align-items: start; }
.intro .l { position: sticky; top: 110px; }
.intro .l h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 76px; line-height: 0.96; letter-spacing: -0.015em;
  text-transform: uppercase; margin: 18px 0 0 0;
}
.intro .l h2 .red { color: var(--altrad-red); }
.intro .l h2 .strike { color: var(--fg-3); text-decoration: line-through; text-decoration-thickness: 3px; }
.intro .l .stamp {
  margin-top: 36px; padding: 14px 16px;
  border-left: 3px solid var(--altrad-red);
  background: var(--steel-50);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--fg-1); max-width: 360px;
}
.intro .r .lede {
  font-size: 19px; line-height: 1.6;
  color: var(--fg-1); margin: 0 0 28px 0;
  text-wrap: pretty;
}
.intro .r .body {
  font-size: 15.5px; line-height: 1.7;
  color: var(--fg-2); margin: 0 0 36px 0;
  max-width: 580px;
}
.intro .r .stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
}
.intro .r .stat {
  padding: 28px 24px 28px 0;
  border-right: 1px solid var(--border-2);
}
.intro .r .stat:last-child { border-right: none; padding-right: 0; padding-left: 24px; }
.intro .r .stat:nth-child(2) { padding-left: 24px; }
.intro .r .stat .lbl {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-3); letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 12px;
}
.intro .r .stat .v {
  font-family: var(--font-display); font-weight: 600;
  font-size: 56px; line-height: 0.92; letter-spacing: -0.015em;
  text-transform: uppercase; color: var(--fg-1);
}
.intro .r .stat .v .u { color: var(--fg-3); font-size: 18px; margin-left: 4px; }
.intro .r .stat .v .red { color: var(--altrad-red); }
.intro .r .stat .desc {
  font-size: 12px; line-height: 1.6; color: var(--fg-3);
  margin-top: 8px; font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* ================================================================
   PRODUCT PORTFOLIO — 3 cards (ERW / Scaffolding / Metal Planks)
   ================================================================ */
.portfolio { background: white; padding: 128px 0; }
.portfolio .head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: end; margin-bottom: 56px;
}
.portfolio .head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 68px; line-height: 0.96; letter-spacing: -0.01em;
  text-transform: uppercase; margin: 14px 0 0 0;
}
.portfolio .head h2 .red { color: var(--altrad-red); }
.portfolio .head .lede {
  font-size: 17px; line-height: 1.55; color: var(--fg-2);
  max-width: 460px;
}
.portfolio .head .lede a { color: var(--altrad-red); font-weight: 600; }

.portfolio .grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px;
  grid-template-rows: 400px 400px;
}
.portfolio .card {
  background: white; border: 1px solid var(--border-1);
  position: relative; overflow: hidden;
  transition: border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out), transform 240ms var(--ease-out);
  display: flex; flex-direction: column;
  cursor: pointer;
}
.portfolio .card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.portfolio .card.hero-card {
  grid-row: span 2;
  background: var(--steel-900); color: white;
  border-color: var(--steel-900);
}
.portfolio .card.hero-card .img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.55) contrast(1.05);
  transition: transform 600ms var(--ease-out), filter 400ms var(--ease-out);
}
.portfolio .card.hero-card:hover .img { transform: scale(1.06); filter: brightness(0.6); }
.portfolio .card.hero-card .body {
  position: relative; z-index: 2; padding: 36px 32px;
  display: flex; flex-direction: column; height: 100%;
  background: linear-gradient(180deg, rgba(10,12,16,0.0) 0%, rgba(10,12,16,0.0) 30%, rgba(10,12,16,0.92) 100%);
}
.portfolio .card.hero-card .top { display: flex; justify-content: space-between; align-items: flex-start; }
.portfolio .card.hero-card .num {
  font-family: var(--font-mono); font-size: 11px; color: #ff6168;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.portfolio .card.hero-card .iso {
  font-family: var(--font-mono); font-size: 9.5px;
  color: rgba(255,255,255,0.55); letter-spacing: 0.10em;
}
.portfolio .card.hero-card h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 64px; line-height: 0.92; letter-spacing: -0.015em;
  text-transform: uppercase; color: white;
  margin: auto 0 16px 0;
}
.portfolio .card.hero-card p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 460px; }
.portfolio .card.hero-card .ftr {
  margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.portfolio .card.hero-card .ftr .pills { display: flex; gap: 6px; flex-wrap: wrap; }

.portfolio .card.std {
  padding: 28px;
  display: flex; flex-direction: column;
  position: relative;
}
.portfolio .card.std::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: var(--altrad-red); transform: scaleX(0); transform-origin: left;
  transition: transform 320ms var(--ease-out);
}
.portfolio .card.std:hover::before { transform: scaleX(1); }
.portfolio .card.std .top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 18px;
}
.portfolio .card.std .num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--altrad-red); letter-spacing: 0.18em; text-transform: uppercase;
}
.portfolio .card.std .icon-sq {
  width: 48px; height: 48px; background: var(--altrad-red-tint);
  color: var(--altrad-red);
  display: inline-flex; align-items: center; justify-content: center;
}
.portfolio .card.std h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 32px; line-height: 1.0; letter-spacing: -0.005em;
  text-transform: uppercase; margin: auto 0 10px 0;
  color: var(--fg-1);
}
.portfolio .card.std h3 .reg { color: var(--altrad-red); font-size: 18px; vertical-align: 6px; }
.portfolio .card.std p { font-size: 13.5px; line-height: 1.6; color: var(--fg-2); margin: 0 0 18px 0; }
.portfolio .card.std .spec-mini {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-1);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
  font-family: var(--font-mono); font-size: 10.5px;
}
.portfolio .card.std .spec-mini .k { color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; }
.portfolio .card.std .spec-mini .vv { color: var(--fg-1); font-weight: 500; }

/* ================================================================
   OPERATING MODEL — 5-pillar horizontal scroll-pinned
   ================================================================ */
.opmodel {
  background: var(--steel-50);
  padding: 128px 0 0;
  border-top: 1px solid var(--border-1);
}
.opmodel .head {
  max-width: 1240px; margin: 0 auto 64px; padding: 0 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end;
}
.opmodel .head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 68px; line-height: 0.96; letter-spacing: -0.01em;
  text-transform: uppercase; margin: 14px 0 0 0;
}
.opmodel .head h2 .red { color: var(--altrad-red); }
.opmodel .head .lede { font-size: 17px; line-height: 1.55; color: var(--fg-2); max-width: 460px; }
.opmodel .rail {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 2px solid var(--border-strong);
  border-bottom: 1px solid var(--border-1);
  background: white;
  max-width: 1440px; margin: 0 auto;
}
.opmodel .step {
  padding: 36px 28px 56px;
  border-right: 1px solid var(--border-1);
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  transition: background 200ms;
}
.opmodel .step:last-child { border-right: none; }
.opmodel .step:hover { background: var(--steel-50); }
.opmodel .step::before {
  content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: 0;
  background: var(--altrad-red);
  transition: width 320ms var(--ease-out);
}
.opmodel .step:hover::before { width: 100%; }
.opmodel .step .n {
  font-family: var(--font-mono); font-size: 11px; color: var(--altrad-red);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.opmodel .step .ico {
  width: 36px; height: 36px;
  color: var(--altrad-red);
  display: inline-flex; align-items: center; justify-content: center;
}
.opmodel .step h4 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; line-height: 1.05; letter-spacing: -0.005em;
  text-transform: uppercase; margin: 0; color: var(--fg-1);
}
.opmodel .step p {
  font-size: 13px; line-height: 1.6; color: var(--fg-2); margin: 0;
}
.opmodel .rail-ftr {
  max-width: 1440px; margin: 0 auto;
  padding: 18px 40px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); letter-spacing: 0.10em; text-transform: uppercase;
}
.opmodel .rail-ftr .progress {
  flex: 1; margin: 0 24px; height: 1px; background: var(--border-2);
  position: relative; overflow: hidden;
}
.opmodel .rail-ftr .progress::after {
  content: ""; position: absolute; left: 0; top: 0; height: 100%;
  width: 100%; background: var(--altrad-red);
}
.opmodel .rail-bot { padding-bottom: 96px; background: var(--steel-50); }

/* ================================================================
   MANUFACTURER NOT TRADER — editorial split with image
   ================================================================ */
.mvt {
  background: white; padding: 128px 0;
  border-top: 1px solid var(--border-1);
}
.mvt .wrap-wide {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: stretch;
}
.mvt .col-l {
  position: relative; min-height: 640px;
  background: var(--steel-900); overflow: hidden;
}
.mvt .col-l .img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(0.10) brightness(0.85) contrast(1.05);
  transition: transform 800ms var(--ease-out);
}
.mvt:hover .col-l .img { transform: scale(1.04); }
.mvt .col-l .label-card {
  position: absolute; left: 28px; bottom: 28px; right: 28px;
  background: rgba(10,12,16,0.86);
  backdrop-filter: blur(6px);
  padding: 24px 28px;
  color: white;
  border-left: 3px solid var(--altrad-red);
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
}
.mvt .col-l .label-card .ic {
  width: 40px; height: 40px; background: var(--altrad-red);
  display: inline-flex; align-items: center; justify-content: center; color: white;
}
.mvt .col-l .label-card .body .k {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(255,255,255,0.55); letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 4px;
}
.mvt .col-l .label-card .body .v {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; text-transform: uppercase; letter-spacing: -0.005em; color: white;
}
.mvt .col-l .label-card .arr {
  width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.30);
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-family: var(--font-mono); font-size: 13px;
}

.mvt .col-r { padding: 12px 0; }
.mvt .col-r h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 76px; line-height: 0.94; letter-spacing: -0.015em;
  text-transform: uppercase; margin: 18px 0 0 0;
}
.mvt .col-r h2 .strike { color: var(--fg-3); text-decoration: line-through; text-decoration-thickness: 3px; }
.mvt .col-r h2 .red { color: var(--altrad-red); }
.mvt .col-r .body { font-size: 16px; line-height: 1.65; color: var(--fg-2); margin: 28px 0 28px 0; max-width: 540px; }
.mvt .col-r .twocol {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  margin-top: 24px;
  border-top: 1px solid var(--border-2); padding-top: 28px;
}
.mvt .col-r .twocol .col h5 {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--altrad-red); letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0 0 14px 0; font-weight: 600;
}
.mvt .col-r .twocol .col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.mvt .col-r .twocol .col ul li {
  display: grid; grid-template-columns: 14px 1fr; gap: 12px;
  font-size: 13.5px; line-height: 1.55; color: var(--fg-1);
}
.mvt .col-r .twocol .col ul li::before {
  content: ""; width: 6px; height: 6px; background: var(--altrad-red);
  margin-top: 8px;
}

/* ================================================================
   INDUSTRIES — 5 images
   ================================================================ */
.industries { background: var(--steel-900); padding: 128px 0; color: white; }
.industries .head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: end; margin-bottom: 56px;
}
.industries h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 68px; line-height: 0.96; letter-spacing: -0.01em;
  text-transform: uppercase; margin: 14px 0 0 0; color: white;
}
.industries .head .lede { font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.70); max-width: 460px; }
.industries .grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 12px; height: 480px;
}
.industries .ind {
  position: relative; overflow: hidden; background: var(--steel-800);
  cursor: pointer;
  transition: transform 240ms var(--ease-out);
}
.industries .ind:hover { transform: translateY(-3px); }
.industries .ind .img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.55) contrast(1.05);
  transition: transform 600ms var(--ease-out), filter 320ms var(--ease-out);
}
.industries .ind:hover .img { transform: scale(1.08); filter: brightness(0.7) contrast(1.05); }
.industries .ind .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,16,0.20) 0%, rgba(10,12,16,0.0) 35%, rgba(10,12,16,0.92) 100%);
}
.industries .ind .body {
  position: relative; z-index: 2; height: 100%;
  padding: 22px 22px 26px; color: white;
  display: flex; flex-direction: column; justify-content: space-between;
}
.industries .ind .num {
  font-family: var(--font-mono); font-size: 11px; color: #ff6168;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.industries .ind h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 26px; line-height: 1.0; letter-spacing: -0.005em;
  text-transform: uppercase; color: white; margin: 0;
}
.industries .ind.feature h3 { font-size: 42px; max-width: 280px; }
.industries .ind p {
  font-size: 12.5px; line-height: 1.55;
  color: rgba(255,255,255,0.78); margin: 8px 0 0 0;
}
.industries .ind .arr {
  align-self: flex-end;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.30);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 14px;
  transition: background 200ms, border-color 200ms;
}
.industries .ind:hover .arr { background: var(--altrad-red); border-color: var(--altrad-red); }
.industries .ind .pill-row {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.industries .ind .bot { display: flex; flex-direction: column; gap: 10px; }

/* ================================================================
   STATS BAND — large industrial counter wall
   ================================================================ */
.stats {
  background: var(--steel-900); color: white;
  padding: 0 0 0; border-top: 1px solid rgba(255,255,255,0.05);
  position: relative; overflow: hidden;
}
.stats .head-row {
  padding: 96px 0 48px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.stats .head-row .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.stats .head-row h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 56px; line-height: 0.98; letter-spacing: -0.01em;
  text-transform: uppercase; color: white; margin: 14px 0 0 0;
}
.stats .head-row p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.70); max-width: 460px; }
.stats .grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; position: relative;
}
.stats .stat {
  padding: 48px 32px 56px;
  border-right: 1px solid rgba(255,255,255,0.10);
}
.stats .stat:last-child { border-right: none; }
.stats .stat .lbl {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.50); letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 18px;
}
.stats .stat .v {
  font-family: var(--font-display); font-weight: 600;
  font-size: 88px; line-height: 0.92; letter-spacing: -0.02em;
  text-transform: uppercase; color: white;
}
.stats .stat .v .u { color: rgba(255,255,255,0.50); font-size: 26px; margin-left: 4px; }
.stats .stat .v .red { color: var(--altrad-red); }
.stats .stat .desc {
  margin-top: 16px; font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,0.70); max-width: 260px;
}

/* ================================================================
   AUDIENCE — Who We Serve
   ================================================================ */
.audience { background: white; padding: 128px 0; }
.audience .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.audience .col-l h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 68px; line-height: 0.96; letter-spacing: -0.015em;
  text-transform: uppercase; margin: 14px 0 28px 0;
}
.audience .col-l h2 .red { color: var(--altrad-red); }
.audience .col-l .lede { font-size: 17px; line-height: 1.6; color: var(--fg-2); margin: 0 0 32px 0; max-width: 460px; }
.audience .col-l .quote {
  margin-top: 18px;
  border-left: 3px solid var(--altrad-red);
  padding: 6px 0 6px 20px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; line-height: 1.2;
  color: var(--fg-1); max-width: 480px;
}

.audience .roles { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border-2); }
.audience .role {
  display: grid; grid-template-columns: 60px 1fr auto;
  gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--border-2);
  align-items: center; cursor: pointer;
  transition: padding-left 200ms var(--ease-out), background 200ms;
  position: relative;
}
.audience .role::before {
  content: ""; position: absolute; left: -16px; top: 50%;
  width: 2px; height: 0; background: var(--altrad-red);
  transform: translateY(-50%);
  transition: height 240ms var(--ease-out);
}
.audience .role:hover { padding-left: 12px; }
.audience .role:hover::before { height: calc(100% - 16px); }
.audience .role .n {
  font-family: var(--font-mono); font-size: 11px; color: var(--altrad-red);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.audience .role h4 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; text-transform: uppercase; letter-spacing: -0.005em;
  line-height: 1.1; margin: 0 0 6px 0;
}
.audience .role p { font-size: 13.5px; line-height: 1.55; color: var(--fg-2); margin: 0; }
.audience .role .arr {
  width: 36px; height: 36px; border: 1px solid var(--border-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-2); font-family: var(--font-mono); font-size: 13px;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.audience .role:hover .arr { background: var(--altrad-red); border-color: var(--altrad-red); color: white; }

/* ================================================================
   QUALITY — table + standards
   ================================================================ */
.quality {
  background: var(--steel-50); padding: 128px 0;
  border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1);
}
.quality .head {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: end;
  margin-bottom: 48px;
}
.quality h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 56px; line-height: 0.98; letter-spacing: -0.01em;
  text-transform: uppercase; margin: 14px 0 0 0;
}
.quality h2 .red { color: var(--altrad-red); }
.quality .head .lede { font-size: 16px; line-height: 1.65; color: var(--fg-2); max-width: 540px; }
.quality .head .lede .pull { color: var(--fg-1); font-weight: 600; }
.quality .body-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px;
}
.quality .table-wrap { background: white; border: 1px solid var(--border-1); }
.quality table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 13px; }
.quality thead th {
  text-align: left; padding: 16px 18px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.10em;
  background: var(--steel-50); border-bottom: 2px solid var(--border-strong);
}
.quality tbody td {
  padding: 16px 18px; border-bottom: 1px solid var(--border-1);
  vertical-align: middle;
}
.quality tbody tr:hover td { background: var(--steel-50); }
.quality tbody td.product { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; color: var(--fg-1); font-size: 14px; letter-spacing: -0.005em; }
.quality tbody td.mono { font-family: var(--font-mono); font-size: 12px; color: var(--fg-1); }
.quality tbody td .pill { font-size: 9.5px; }
.quality tbody tr.featured td { background: var(--altrad-red-tint); }
.quality tbody tr.featured td.product { color: var(--altrad-red-deep); }
.quality .table-ftr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px; background: var(--steel-50); border-top: 1px solid var(--border-1);
}
.quality .table-ftr .l { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.08em; text-transform: uppercase; }
.quality .table-ftr .more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--altrad-red);
  padding: 8px 16px; border: 1px solid var(--altrad-red);
}
.quality .table-ftr .more:hover { background: var(--altrad-red); color: white; }

.quality .docs {
  background: white; border: 1px solid var(--border-1);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.quality .docs h5 {
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.05;
  margin: 0 0 4px 0;
}
.quality .docs .stamp {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--altrad-red); letter-spacing: 0.18em;
  text-transform: uppercase;
}
.quality .docs ul { list-style: none; padding: 0; margin: 10px 0 0 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border-1); }
.quality .docs ul li {
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border-1);
  align-items: center;
}
.quality .docs ul li .lbl { font-size: 13px; color: var(--fg-1); }
.quality .docs ul li .lbl small {
  display: block; font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-3); letter-spacing: 0.08em; margin-top: 3px;
  text-transform: uppercase;
}
.quality .docs ul li .tag {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--altrad-red); border: 1px solid var(--altrad-red);
  padding: 3px 8px; letter-spacing: 0.08em;
}
.quality .docs .ftr {
  margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border-1);
  display: flex; justify-content: space-between; align-items: center;
}
.quality .docs .ftr .v {
  font-family: var(--font-display); font-weight: 600;
  font-size: 32px; line-height: 1; letter-spacing: -0.005em;
  text-transform: uppercase; color: var(--fg-1);
}
.quality .docs .ftr .v .u { color: var(--fg-3); font-size: 14px; margin-left: 4px; }
.quality .docs .ftr .v .red { color: var(--altrad-red); }

/* ================================================================
   REGIONAL PRESENCE — GCC map
   ================================================================ */
.region { background: white; padding: 128px 0; }
.region .head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: end; margin-bottom: 56px;
}
.region h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 68px; line-height: 0.96; letter-spacing: -0.01em;
  text-transform: uppercase; margin: 14px 0 0 0;
}
.region h2 .red { color: var(--altrad-red); }
.region .head .lede { font-size: 17px; line-height: 1.55; color: var(--fg-2); max-width: 460px; }
.region .body-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px;
  align-items: stretch;
}
.region .map-wrap {
  background: var(--steel-50);
  border: 1px solid var(--border-1);
  padding: 32px;
  position: relative; min-height: 520px;
  overflow: hidden;
}
.region .map-wrap .grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(20,23,28,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,23,28,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent);
}
.region .map-wrap svg { position: relative; width: 100%; height: 460px; }
.region .map-wrap .map-ftr {
  position: absolute; left: 32px; right: 32px; bottom: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--fg-3); letter-spacing: 0.10em; text-transform: uppercase;
}
.region .map-wrap .map-ftr b { color: var(--altrad-red); }

.region .countries {
  display: flex; flex-direction: column; gap: 0;
  background: white; border: 1px solid var(--border-1);
}
.region .country {
  display: grid; grid-template-columns: 36px 1fr auto auto;
  gap: 18px; padding: 20px 24px;
  border-bottom: 1px solid var(--border-1);
  align-items: center;
  transition: background 160ms;
  cursor: pointer;
}
.region .country:last-child { border-bottom: none; }
.region .country:hover { background: var(--steel-50); }
.region .country.hq { background: var(--altrad-red-tint); }
.region .country .n {
  font-family: var(--font-mono); font-size: 11px; color: var(--altrad-red);
  letter-spacing: 0.10em;
}
.region .country .name {
  font-family: var(--font-display); font-weight: 600;
  font-size: 20px; text-transform: uppercase; letter-spacing: -0.005em;
  color: var(--fg-1); line-height: 1;
}
.region .country .name small {
  display: block; font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-3); letter-spacing: 0.10em;
  text-transform: uppercase; margin-top: 5px; font-weight: 500;
}
.region .country.hq .name small { color: var(--altrad-red); }
.region .country .tag {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-3); letter-spacing: 0.10em;
  text-transform: uppercase;
}
.region .country .arr {
  font-family: var(--font-mono); font-size: 13px; color: var(--fg-3);
}

/* ================================================================
   CARRYING LIFE — bilingual quote
   ================================================================ */
.promise {
  background: var(--steel-900); color: white;
  padding: 128px 0; position: relative; overflow: hidden;
}
.promise::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
}
.promise .wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; }
.promise .col-l .eyebrow { color: #ff6168; margin-bottom: 18px; }
.promise .col-l .eyebrow::before { background: #ff6168; }
.promise .col-l h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 104px; line-height: 0.92; letter-spacing: -0.02em;
  text-transform: uppercase; color: white; margin: 0;
}
.promise .col-l h2 .red { color: var(--altrad-red); }
.promise .col-l .ar {
  margin-top: 36px;
  font-family: var(--font-ar-display);
  font-size: 44px; line-height: 1.25;
  color: white; direction: rtl; text-align: right;
  font-weight: 700;
}
.promise .col-l .ar-meta {
  font-family: var(--font-mono); font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-top: 10px; text-align: right; direction: rtl;
}
.promise .col-r {
  padding-top: 28px;
  border-left: 1px solid rgba(255,255,255,0.10);
  padding-left: 64px;
}
.promise .col-r .lede {
  font-size: 18px; line-height: 1.7; color: rgba(255,255,255,0.85);
  margin: 0 0 28px 0; max-width: 480px;
}
.promise .col-r .body {
  font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.65);
  margin: 0 0 32px 0; max-width: 480px;
}
.promise .col-r .sig {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.10em; text-transform: uppercase;
  border-top: 1px solid rgba(255,255,255,0.20); padding-top: 18px;
  margin-top: 28px;
  display: flex; gap: 32px;
}
.promise .col-r .sig div { display: flex; flex-direction: column; gap: 6px; }
.promise .col-r .sig b { color: white; font-size: 13px; font-weight: 600; }

/* ================================================================
   FAQ
   ================================================================ */
.faq { background: white; padding: 128px 0; }
.faq .wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 96px; align-items: start; }
.faq .col-l { position: sticky; top: 110px; }
.faq h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 56px; line-height: 0.96; letter-spacing: -0.01em;
  text-transform: uppercase; margin: 14px 0 0 0;
}
.faq h2 .red { color: var(--altrad-red); }
.faq .col-l p { font-size: 15px; line-height: 1.65; color: var(--fg-2); margin: 24px 0 0 0; max-width: 360px; }
.faq .col-l .helpline {
  margin-top: 32px; padding: 22px;
  background: var(--steel-50); border-left: 3px solid var(--altrad-red);
}
.faq .col-l .helpline .k {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--fg-3); letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 8px;
}
.faq .col-l .helpline .v {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; text-transform: uppercase; letter-spacing: -0.005em;
  color: var(--fg-1); line-height: 1.1;
}
.faq .col-l .helpline a {
  display: block; margin-top: 4px;
  font-family: var(--font-mono); font-size: 14px; color: var(--altrad-red);
  letter-spacing: 0.04em;
}
.faq .list { display: flex; flex-direction: column; border-top: 1px solid var(--border-2); }
.faq details {
  border-bottom: 1px solid var(--border-2);
  padding: 24px 0;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: grid; grid-template-columns: 56px 1fr 32px;
  gap: 18px; align-items: start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .n {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--altrad-red); letter-spacing: 0.18em;
  padding-top: 6px;
}
.faq summary .q {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.005em;
  text-transform: uppercase; color: var(--fg-1);
  transition: color 160ms;
}
.faq summary:hover .q { color: var(--altrad-red); }
.faq summary .ix {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-2);
  font-family: var(--font-mono); font-size: 14px; color: var(--fg-2);
  transition: transform 240ms var(--ease-out), background 160ms, color 160ms, border-color 160ms;
}
.faq details[open] summary .ix { background: var(--altrad-red); color: white; border-color: var(--altrad-red); transform: rotate(45deg); }
.faq details .ans {
  margin: 16px 0 0 74px; max-width: 680px;
  font-size: 14.5px; line-height: 1.7; color: var(--fg-2);
  overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height 320ms var(--ease-out), opacity 280ms var(--ease-out), margin-top 200ms;
}
.faq details[open] .ans { max-height: 800px; opacity: 1; }
.faq details .ans .mono-line {
  margin-top: 12px; padding: 10px 12px; background: var(--steel-50);
  border-left: 2px solid var(--altrad-red);
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-1);
}

/* ================================================================
   CTA STRIP — red
   ================================================================ */
.cta-strip {
  background: var(--altrad-red); color: white;
  padding: 96px 0; position: relative; overflow: hidden;
}
.cta-strip::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 80px 80px;
}
.cta-strip::after {
  content: ""; position: absolute; left: -10%; top: -50%; width: 60%; height: 200%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.10), transparent 70%);
  transform: rotate(-12deg);
}
.cta-strip .wrap {
  display: grid; grid-template-columns: 2fr 1fr; gap: 64px; align-items: center;
  position: relative;
}
.cta-strip .col-l .eyebrow { color: rgba(255,255,255,0.92); margin-bottom: 22px; }
.cta-strip .col-l .eyebrow::before { background: white; }
.cta-strip h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 84px; line-height: 0.94; letter-spacing: -0.02em;
  text-transform: uppercase; color: white; margin: 0;
}
.cta-strip p { font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.85); max-width: 620px; margin: 24px 0 0 0; }
.cta-strip .ctas {
  display: flex; flex-direction: column; gap: 12px; align-items: stretch;
}
.cta-strip .btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; gap: 24px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  border-radius: 4px; height: auto;
}
.cta-strip .btn.primary {
  background: white; color: var(--altrad-red-deep);
}
.cta-strip .btn.primary:hover { background: var(--altrad-red-tint); }
.cta-strip .btn.ghost {
  background: transparent; color: white; border: 1px solid white;
}
.cta-strip .btn.ghost:hover { background: rgba(255,255,255,0.08); }
.cta-strip .btn .arr { font-family: var(--font-mono); transition: transform 200ms; }
.cta-strip .btn:hover .arr { transform: translateX(4px); }

/* ================================================================
   FOOTER
   ================================================================ */
footer.site {
  background: var(--steel-900); color: var(--steel-300);
  padding: 96px 0 32px;
}
footer.site .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--steel-800); }
footer.site .brand .logo { display: inline-flex; align-items: center; margin-bottom: 22px; }
footer.site .brand .logo .primary-logo {
  height: 52px; width: auto; display: block;
  padding: 4px 8px;
}
footer.site .brand p { font-size: 14px; line-height: 1.65; color: var(--steel-400); max-width: 320px; margin: 0; }
footer.site .brand .addr {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--steel-400);
  line-height: 1.8; margin-top: 22px; letter-spacing: 0.04em;
}
footer.site .brand .addr b { color: white; font-weight: 500; }
footer.site .col h5 {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--steel-400);
  letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 22px 0; font-weight: 500;
}
footer.site .col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
footer.site .col ul li a { font-size: 13.5px; color: var(--steel-300); transition: color 120ms; display: inline-flex; align-items: center; gap: 6px; }
footer.site .col ul li a:hover { color: white; }
footer.site .col ul li a .reg { color: var(--altrad-red); font-size: 10px; vertical-align: 5px; }
footer.site .bot {
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--steel-500);
  letter-spacing: 0.06em;
}
footer.site .bot .legal { display: flex; gap: 22px; }
footer.site .bot .legal a:hover { color: var(--steel-300); }
footer.site .bot .group { color: var(--steel-400); }
footer.site .bot .group b { color: white; }

/* ================================================================
   STICKY UTILITY WIDGETS
   ================================================================ */
.util-whatsapp, .util-calc {
  position: fixed; z-index: 9;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 220ms var(--ease-out);
}
.util-whatsapp:hover, .util-calc:hover { transform: scale(1.06); }
.util-whatsapp {
  left: 24px; bottom: 24px;
  width: 56px; height: 56px;
  background: #25D366; border-radius: 50%;
  box-shadow: 0 6px 20px rgba(20,23,28,0.20);
  color: white;
}
.util-whatsapp .ic { color: white; }
.util-calc {
  right: 0; top: 50%;
  background: var(--altrad-red); color: white;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  padding: 20px 14px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: -4px 0 16px rgba(20,23,28,0.12);
}
.util-calc:hover { transform: translateY(-50%) rotate(180deg) scale(1.06); color: #fff; }

/* ================================================================
   SCROLL REVEAL
   ================================================================ */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1; transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 560ms; }

/* Hero entry animation */
.hero-entry .col-left > * {
  opacity: 0; transform: translateY(20px);
  animation: hero-up 900ms var(--ease-out) forwards;
}
.hero-entry .col-left > *:nth-child(1) { animation-delay: 100ms; }
.hero-entry .col-left > *:nth-child(2) { animation-delay: 220ms; }
.hero-entry .col-left > *:nth-child(3) { animation-delay: 360ms; }
.hero-entry .col-left > *:nth-child(4) { animation-delay: 500ms; }
.hero-entry .col-right > * {
  opacity: 0; transform: translateY(20px);
  animation: hero-up 1100ms var(--ease-out) forwards;
  animation-delay: 620ms;
}
.hero-entry .hero-foot {
  opacity: 0; transform: translateY(10px);
  animation: hero-up 900ms var(--ease-out) forwards;
  animation-delay: 900ms;
}
@keyframes hero-up {
  to { opacity: 1; transform: translateY(0); }
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-entry .col-left > *,
  .hero-entry .col-right > *,
  .hero-entry .hero-foot {
    opacity: 1; transform: none; animation: none;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
  .hero .hero-bg.active { animation: none; transform: scale(1.04); }
  .ticker .marquee { animation: none; }
  .hero .rot-ui.inline .dots span.active::after { animation: none; transform: scaleX(1); }
}

/* Icon helpers */
.ico {
  display: inline-flex; align-items: center; justify-content: center;
}
.ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; }


/* ================================================================
   RESPONSIVE — 1280px and below
   ================================================================ */
@media (max-width: 1280px) {
  .wrap, .wrap-wide { padding: 0 28px; }
  .hero .hero-inner { gap: 48px; }
  .intro, .portfolio, .opmodel, .mvt, .industries,
  .audience, .quality, .region, .promise, .faq { padding-top: 96px; padding-bottom: 96px; }
  .stats .head-row { padding: 72px 0 40px; }
  .stats .stat { padding: 40px 24px 48px; }
  .stats .stat .v { font-size: 72px; }
  .cta-strip { padding: 72px 0; }
  .cta-strip h2 { font-size: 64px; }
  .intro .wrap-wide,
  .portfolio .head, .industries .head, .opmodel .head, .quality .head, .region .head,
  .promise .wrap, .faq .wrap, .audience .wrap, .mvt .wrap-wide { gap: 56px; }
  .portfolio .head h2, .industries h2, .region h2, .audience .col-l h2,
  .opmodel .head h2, .mvt .col-r h2 { font-size: 56px; }
  .intro .l h2 { font-size: 60px; }
  .promise .col-l h2 { font-size: 84px; }
  .quality h2, .stats .head-row h2, .faq h2 { font-size: 48px; }
}

/* ================================================================
   TABLET — 1024px and below
   ================================================================ */
@media (max-width: 1024px) {
  .wrap, .wrap-wide { padding: 0 24px; }

  .util-top { height: auto; padding: 8px 0; font-size: 10.5px; }
  .util-top .wrap-wide { flex-wrap: wrap; gap: 8px 16px; }
  .util-top .right { gap: 16px; }

  header.site { height: 64px; }
  header.site.shrunk { height: 60px; }
  header.site .wrap-wide { gap: 16px; justify-content: space-between; }
  header.site nav.primary { display: none; }
  header.site .search { display: none; }
  header.site .header-cta { height: 38px; padding: 0 14px; font-size: 11px; }
  header.site .logo .primary-logo { height: 36px; }

  /* HERO — stack columns on tablet */
  .hero {
    height: auto;
    min-height: auto;
    padding-bottom: 80px;
  }
  .hero .wrap-wide {
    padding-bottom: 0;
    align-items: flex-start;
  }
  .hero .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 0 40px;
    align-items: start;
  }
  .hero h1.display { font-size: clamp(40px, 8vw, 72px); max-width: 100%; }
  .hero .hero-sub { font-size: 15px; max-width: 100%; }
  .hero .proof-card { max-width: 100%; margin-left: 0; }
  .hero .proof-card .v { font-size: 56px; }
  .hero .hero-foot .wrap-wide { flex-wrap: wrap; gap: 12px; }
  .hero .scroll-hint { display: none; }

  /* Trust */
  .trust .wrap-wide { grid-template-columns: 1fr; gap: 32px; }
  .trust .head { border-right: none; padding-right: 0;
    border-bottom: 1px solid var(--border-1); padding-bottom: 24px; }
  .trust .badges { grid-template-columns: repeat(3, 1fr); }
  .trust .badge:nth-child(3) { border-right: none; }
  .trust .badge:nth-child(n+4) { border-top: 1px solid var(--border-1); }

  /* Intro */
  .intro .wrap-wide { grid-template-columns: 1fr; gap: 40px; }
  .intro .l { position: static; }
  .intro .l h2 { font-size: 52px; }
  .intro .r .stats-row { grid-template-columns: repeat(3, 1fr); }
  .intro .r .stat { padding: 20px 12px; }
  .intro .r .stat .v { font-size: 40px; }

  /* Portfolio grid */
  .portfolio .head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .portfolio .head h2 { font-size: 48px; }
  .portfolio .grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .portfolio .card.hero-card { grid-row: span 1; min-height: 380px; }
  .portfolio .card.hero-card h3 { font-size: 44px; }
  .portfolio .card.std { min-height: 320px; }

  /* Operating model */
  .opmodel .head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .opmodel .rail { grid-template-columns: repeat(2, 1fr); }
  .opmodel .step { border-bottom: 1px solid var(--border-1); }
  .opmodel .step:nth-child(2n) { border-right: none; }
  .opmodel .step:nth-last-child(-n+2) { border-bottom: none; }

  /* Manufacturer / Not Trader */
  .mvt .wrap-wide { grid-template-columns: 1fr; gap: 32px; }
  .mvt .col-l { min-height: 360px; }
  .mvt .col-r h2 { font-size: 52px; }
  .mvt .col-r .twocol { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* Industries */
  .industries .head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .industries .grid {
    grid-template-columns: 1fr 1fr; height: auto; gap: 12px;
  }
  .industries .ind { aspect-ratio: 4 / 3; }
  .industries .ind.feature { grid-column: span 2; aspect-ratio: 16 / 9; }
  .industries .ind.feature h3 { font-size: 32px; }

  /* Stats */
  .stats .head-row .wrap { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .stats .grid { grid-template-columns: repeat(2, 1fr); }
  .stats .stat { border-bottom: 1px solid rgba(255,255,255,0.10); }
  .stats .stat:nth-child(2n) { border-right: none; }
  .stats .stat:nth-last-child(-n+2) { border-bottom: none; }
  .stats .stat .v { font-size: 64px; }

  /* Audience */
  .audience .wrap { grid-template-columns: 1fr; gap: 32px; }
  .audience .col-l h2 { font-size: 52px; }

  /* Quality */
  .quality .head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .quality .body-grid { grid-template-columns: 1fr; }
  .quality .table-wrap { overflow-x: auto; }
  .quality table { min-width: 640px; }

  /* Region */
  .region .head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .region .body-grid { grid-template-columns: 1fr; }
  .region .map-wrap { min-height: 380px; }
  .region .map-wrap svg { height: 320px; }

  /* Promise */
  .promise .wrap { grid-template-columns: 1fr; gap: 40px; }
  .promise .col-r {
    padding-left: 0; border-left: none;
    border-top: 1px solid rgba(255,255,255,0.10); padding-top: 32px;
  }
  .promise .col-l h2 { font-size: 72px; }
  .promise .col-l .ar { font-size: 36px; }

  /* FAQ */
  .faq .wrap { grid-template-columns: 1fr; gap: 32px; }
  .faq .col-l { position: static; }
  .faq h2 { font-size: 44px; }
  .faq summary .q { font-size: 18px; }
  .faq details .ans { margin-left: 74px; }

  /* CTA */
  .cta-strip .wrap { grid-template-columns: 1fr; gap: 32px; }
  .cta-strip h2 { font-size: 56px; }

  /* Footer */
  footer.site { padding: 64px 0 24px; }
  footer.site .top { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-bottom: 32px; }
  footer.site .brand { grid-column: span 2; }
  footer.site .bot { flex-wrap: wrap; gap: 12px; }

  .util-calc { font-size: 10px; padding: 14px 10px; letter-spacing: 0.12em; }
  .util-whatsapp { width: 48px; height: 48px; left: 16px; bottom: 16px; }
}

/* ================================================================
   MOBILE — 768px and below
   ================================================================ */
@media (max-width: 768px) {
  .wrap, .wrap-wide { padding: 0 20px; }

  /* Util top bar */
  .util-top { height: auto; padding: 7px 0; }
  .util-top .wrap-wide { flex-direction: column; align-items: flex-start; gap: 6px; }
  .util-top .left { gap: 10px; }
  .util-top .right { gap: 12px; }
  .util-top .left .pulse { display: none; }
  .util-top .right a:not([href^="tel"]):not([href^="mailto"]) { display: none; }

  /* HERO — fully rewritten for mobile */
  .hero {
    height: auto;
    min-height: auto;
    padding-bottom: 72px;
  }
  .hero .wrap-wide {
    padding-bottom: 0;
    padding-top: 0;
    align-items: flex-start;
    flex: none;
  }
  .hero .hero-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 28px;
    padding: 40px 0 36px;
    width: 100%;
  }
  .hero .col-left { width: 100%; }
  .hero .col-right { width: 100%; }
  .hero h1.display {
    font-size: clamp(34px, 9.5vw, 56px);
    line-height: 0.96;
    max-width: 100%;
    word-break: break-word;
  }
  .hero .eyebrow-row { margin-bottom: 18px; }
  .hero .eyebrow-row .eyebrow { font-size: 10px; }
  .hero .hero-sub {
    font-size: 14px;
    line-height: 1.55;
    max-width: 100%;
    margin-top: 14px;
  }
  .hero .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 20px;
  }
  .hero .hero-ctas .btn {
    width: 100%;
    justify-content: center;
    height: 48px;
  }
  .hero .proof-card {
    max-width: 100%;
    margin-left: 0;
    padding: 18px 18px 16px;
  }
  .hero .proof-card .v { font-size: 48px; }
  .hero .proof-card .row-top { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .hero .proof-card .row-bot {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .hero .proof-card .desc { font-size: 12px; margin: 10px 0 14px 0; }
  .hero .hero-foot { padding: 8px 0; }
  .hero .hero-foot .wrap-wide {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }
  .hero .img-caption { font-size: 9px; gap: 8px; }
  .hero .img-caption::before { width: 16px; }
  .hero .scroll-hint { display: none; }

  /* Trust */
  .trust { padding: 40px 0; }
  .trust .badges { grid-template-columns: repeat(3, 1fr); }

  /* Intro */
  .intro, .portfolio, .opmodel, .mvt, .industries,
  .audience, .quality, .region, .promise, .faq { padding-top: 72px; padding-bottom: 72px; }
  .intro .l h2 { font-size: 44px; }
  .intro .r .lede { font-size: 16px; }
  .intro .r .stats-row { grid-template-columns: 1fr 1fr; }
  .intro .r .stat:nth-child(3) { grid-column: span 2; }
  .intro .r .stat .v { font-size: 40px; }

  /* Portfolio */
  .portfolio .head h2 { font-size: 40px; }
  .portfolio .grid { grid-template-columns: 1fr; }
  .portfolio .card.hero-card { min-height: 340px; }
  .portfolio .card.hero-card h3 { font-size: 36px; }
  .portfolio .card.std { min-height: auto; }
  .portfolio .card.std h3 { font-size: 26px; }

  /* Operating model */
  .opmodel .head h2 { font-size: 40px; }
  .opmodel .rail { grid-template-columns: 1fr 1fr; }
  .opmodel .step { padding: 24px 20px 36px; }

  /* Manufacturer */
  .mvt .col-l { min-height: 300px; }
  .mvt .col-r h2 { font-size: 44px; }
  .mvt .col-r .twocol { grid-template-columns: 1fr 1fr; gap: 20px; }

  /* Industries */
  .industries h2 { font-size: 44px; }
  .industries .grid { grid-template-columns: 1fr 1fr; height: auto; }
  .industries .ind { aspect-ratio: 3 / 2; }
  .industries .ind.feature { grid-column: span 2; aspect-ratio: 16 / 9; }
  .industries .ind.feature h3 { font-size: 28px; }
  .industries .ind h3 { font-size: 20px; }

  /* Stats */
  .stats .head-row h2 { font-size: 40px; }
  .stats .grid { grid-template-columns: 1fr 1fr; }
  .stats .stat .v { font-size: 56px; }

  /* Audience */
  .audience .col-l h2 { font-size: 44px; }
  .audience .role { grid-template-columns: 40px 1fr auto; gap: 14px; }
  .audience .role h4 { font-size: 18px; }
  .audience .role:hover { padding-left: 0; }

  /* Quality */
  .quality h2 { font-size: 40px; }

  /* Region */
  .region h2 { font-size: 44px; }
  .region .map-wrap { padding: 20px; min-height: 300px; }
  .region .map-wrap svg { height: 260px; }
  .region .map-wrap .map-ftr {
    position: static; padding-top: 12px;
    border-top: 1px solid var(--border-1); margin-top: 12px;
    flex-direction: column; gap: 6px; align-items: flex-start;
  }
  .region .country { grid-template-columns: 28px 1fr auto; padding: 14px 16px; gap: 12px; }
  .region .country .tag { display: none; }
  .region .country .name { font-size: 16px; }

  /* Promise */
  .promise .col-l h2 { font-size: 64px; }
  .promise .col-l .ar { font-size: 32px; }
  .promise .col-r .sig { flex-direction: column; gap: 12px; }

  /* FAQ */
  .faq h2 { font-size: 40px; }
  .faq summary { grid-template-columns: 40px 1fr 28px; gap: 12px; }
  .faq summary .q { font-size: 17px; }
  .faq details .ans { margin-left: 52px; font-size: 14px; }

  /* CTA */
  .cta-strip { padding: 56px 0; }
  .cta-strip h2 { font-size: 44px; }
  .cta-strip p { font-size: 15px; }
  .cta-strip .btn { padding: 16px 20px; }

  /* Footer */
  footer.site { padding: 48px 0 20px; }
  footer.site .top { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  footer.site .brand { grid-column: span 2; }
  footer.site .bot { flex-wrap: wrap; gap: 10px; font-size: 10px; }
  footer.site .bot .legal { gap: 14px; }

  /* Utility widgets */
  .util-whatsapp { width: 44px; height: 44px; left: 14px; bottom: 14px; }
}

/* ================================================================
   MOBILE — 480px and below
   ================================================================ */
@media (max-width: 480px) {
  .wrap, .wrap-wide { padding: 0 16px; }

  /* .util-top { display: none; } */
  header.site { height: 56px; }
  header.site .logo .primary-logo { height: 30px; }
  header.site .header-cta { height: 34px; padding: 0 12px; font-size: 10px; letter-spacing: 0.06em; }

  /* HERO */
  .hero { padding-bottom: 64px; }
  .hero .hero-inner { padding: 32px 0 28px; gap: 22px; }
  .hero h1.display {
    font-size: clamp(30px, 10vw, 48px);
    letter-spacing: -0.015em;
  }
  .hero .hero-sub { font-size: 13px; }
  .hero .hero-ctas { margin-top: 16px; gap: 8px; }
  .hero .hero-ctas .btn { height: 44px; font-size: 11px; }
  .hero .proof-card { padding: 16px; }
  .hero .proof-card .v { font-size: 40px; }
  .hero .proof-card .row-bot { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero .proof-card .row-bot .vv { font-size: 12px; }
  .hero .hero-foot .wrap-wide { gap: 8px; }
  .hero .img-caption { display: none; }
  .hero .rot-ui.inline .ctr { display: none; }

  /* Trust */
  .trust .badges { grid-template-columns: repeat(2, 1fr); }
  .trust .badge:nth-child(2n) { border-right: none; }
  .trust .badge:nth-child(n+3) { border-top: 1px solid var(--border-1); }
  .trust .badge:nth-child(3) { border-right: 1px solid var(--border-1); }

  /* Intro */
  .intro, .portfolio, .opmodel, .mvt, .industries,
  .audience, .quality, .region, .promise, .faq { padding-top: 56px; padding-bottom: 56px; }
  .intro .l h2 { font-size: 36px; }
  .intro .r .lede { font-size: 15px; }
  .intro .r .stats-row { grid-template-columns: 1fr; }
  .intro .r .stat { border-right: none !important; border-bottom: 1px solid var(--border-2); padding: 16px 0 !important; }
  .intro .r .stat:last-child { border-bottom: none; }
  .intro .r .stat .v { font-size: 36px; }

  /* Portfolio */
  .portfolio .head h2 { font-size: 34px; }
  .portfolio .card.hero-card h3 { font-size: 28px; }
  .portfolio .card.std h3 { font-size: 22px; }
  .portfolio .card.std .spec-mini { grid-template-columns: 1fr; }

  /* Operating model */
  .opmodel .head h2 { font-size: 34px; }
  .opmodel .rail { grid-template-columns: 1fr; }
  .opmodel .step { border-right: none; }
  .opmodel .step:last-child { border-bottom: none; }
  .opmodel .rail-ftr { flex-direction: column; gap: 10px; align-items: stretch; }
  .opmodel .rail-ftr .progress { margin: 0; }

  /* Manufacturer */
  .mvt .col-l { min-height: 260px; }
  .mvt .col-l .label-card { left: 14px; right: 14px; bottom: 14px; padding: 14px 16px; gap: 10px; }
  .mvt .col-l .label-card .body .v { font-size: 16px; }
  .mvt .col-r h2 { font-size: 36px; }
  .mvt .col-r .body { font-size: 14px; }
  .mvt .col-r .twocol { grid-template-columns: 1fr; gap: 20px; }

  /* Industries */
  .industries h2 { font-size: 36px; }
  .industries .grid { grid-template-columns: 1fr; }
  .industries .ind { aspect-ratio: 4 / 3; }
  .industries .ind.feature { grid-column: span 1; aspect-ratio: 4 / 3; }
  .industries .ind.feature h3 { font-size: 24px; }
  .industries .ind h3 { font-size: 18px; }

  /* Stats */
  .stats .head-row { padding: 44px 0 22px; }
  .stats .head-row h2 { font-size: 34px; }
  .stats .grid { grid-template-columns: 1fr; }
  .stats .stat { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.10); padding: 24px 0; }
  .stats .stat:last-child { border-bottom: none; }
  .stats .stat .v { font-size: 56px; }

  /* Audience */
  .audience .col-l h2 { font-size: 36px; }
  .audience .col-l .quote { font-size: 18px; }
  .audience .role { grid-template-columns: 30px 1fr; gap: 12px; }
  .audience .role .arr { display: none; }
  .audience .role h4 { font-size: 16px; }

  /* Quality */
  .quality h2 { font-size: 34px; }
  .quality .docs { padding: 16px; }
  .quality .docs h5 { font-size: 17px; }

  /* Region */
  .region h2 { font-size: 36px; }
  .region .map-wrap { padding: 16px; min-height: 260px; }
  .region .map-wrap svg { height: 220px; }
  .region .country { grid-template-columns: 24px 1fr; padding: 12px 14px; gap: 10px; }
  .region .country .arr { display: none; }
  .region .country .name { font-size: 14px; }

  /* Promise */
  .promise .col-l h2 { font-size: 52px; }
  .promise .col-l .ar { font-size: 26px; }
  .promise .col-r .lede { font-size: 15px; }
  .promise .col-r .sig { flex-direction: column; gap: 10px; }

  /* FAQ */
  .faq h2 { font-size: 34px; }
  .faq summary { grid-template-columns: 30px 1fr 28px; gap: 10px; }
  .faq summary .q { font-size: 15px; }
  .faq details .ans { margin-left: 40px; font-size: 13px; }
  .faq .col-l .helpline { padding: 14px; }
  .faq .col-l .helpline .v { font-size: 18px; }

  /* CTA */
  .cta-strip { padding: 48px 0; }
  .cta-strip h2 { font-size: 34px; }
  .cta-strip p { font-size: 14px; }
  .cta-strip .btn { padding: 14px 16px; font-size: 11px; }

  /* Footer */
  footer.site { padding: 40px 0 16px; }
  footer.site .top { grid-template-columns: 1fr; gap: 28px; }
  footer.site .brand { grid-column: span 1; }
  footer.site .brand .logo .primary-logo { height: 38px; }
  footer.site .brand p { font-size: 13px; }
  footer.site .bot { flex-direction: column; align-items: flex-start; gap: 8px; }
  footer.site .bot .legal { flex-wrap: wrap; gap: 10px; }

  /* Whatsapp */
  .util-whatsapp { width: 42px; height: 42px; left: 12px; bottom: 12px; }
  .util-whatsapp .ic svg { width: 20px; height: 20px; }
}

/* ================================================================
   VERY SMALL — 360px and below
   ================================================================ */
@media (max-width: 360px) {
  .wrap, .wrap-wide { padding: 0 14px; }
  .hero h1.display { font-size: 28px; }
  .hero .proof-card .v { font-size: 36px; }
  .hero .hero-ctas .btn { font-size: 10px; height: 40px; }
  .intro .l h2, .portfolio .head h2 { font-size: 30px; }
  .promise .col-l h2 { font-size: 44px; }
}

.util-whatsapp{
  position: fixed;
  bottom: 50px;
  right: 40px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 9;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.util-whatsapp .ic{
  position: relative;
  z-index: 2;
}

/* Pulse Animation */
.pulse-ring{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(37,211,102,0.5);
  animation: pulseAnim 2s infinite;
  z-index: 1;
}

@keyframes pulseAnim{
  0%{
    transform: scale(1);
    opacity: 0.8;
  }

  70%{
    transform: scale(1.6);
    opacity: 0;
  }

  100%{
    transform: scale(1.6);
    opacity: 0;
  }
}
.fa-phone{
  transform: rotate(137deg);
}



.util-top{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
body{
  padding-top: 116px;
}
.header-position{
  top: 35px;
}
@media (min-width:320px) and (max-width:992px){
.header-position{
  top: 50px;
}
}
.quote-head{
padding-top: 20px;
}