/* ============================================================
   Layout B — Full-Width Editorial · Teal + Orange
   Used by: Sandvik & Volvo sites
   ============================================================ */

:root {
  --teal:         #0A3D40;
  --teal-mid:     #0D4F54;
  --teal-light:   #16737A;
  --teal-card:    #0B4448;
  --orange:       #E07B00;
  --orange-light: #F59300;
  --orange-dark:  #B86500;
  --orange-glow:  rgba(224,123,0,0.15);
  --orange-border:rgba(224,123,0,0.30);
  --text-on-dark: #E0F4F5;
  --text-muted:   rgba(224,244,245,0.50);
  --text-body:    #1C2B2C;
  --text-mid:     #3A5255;
  --text-light:   #5E7E82;
  --bg-white:     #FFFFFF;
  --bg-off:       #F3F9FA;
  --bg-gray:      #E4EEEF;
  --border:       #C8DEE0;
  --border-light: #DFF0F1;
  --green:        #27AE60;
  --shadow-sm:    0 2px 10px rgba(10,61,64,0.10);
  --shadow-md:    0 8px 28px rgba(10,61,64,0.15);
  --shadow-lg:    0 18px 50px rgba(10,61,64,0.22);
  --transition:   all 0.26s ease;
  --radius:       8px;
  --radius-lg:    18px;
  --max-w:        1100px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  font-family:'Georgia','Times New Roman',serif;
  font-size:17px; line-height:1.85; color:var(--text-body);
  background:var(--bg-white);
}
h1,h2,h3,h4 { font-weight:700; line-height:1.2; color:var(--teal); margin-bottom:0.85rem; }
h1 { font-size:2.6rem; font-style:italic; }
h2 { font-size:1.8rem; font-family:'Inter',system-ui,sans-serif; }
h3 { font-size:1.25rem; font-family:'Inter',system-ui,sans-serif; }
h4 { font-size:1rem; font-family:'Inter',system-ui,sans-serif; font-weight:700; }
p  { margin-bottom:1.25rem; color:var(--text-mid); }
a  { color:var(--teal-light); text-decoration:underline; text-decoration-color:rgba(22,115,122,0.3); transition:var(--transition); }
a:hover { color:var(--orange); text-decoration-color:var(--orange); }
ul,ol { padding-left:1.6rem; margin-bottom:1.2rem; }
li { margin-bottom:0.5rem; color:var(--text-mid); }
strong { color:var(--text-body); font-weight:700; }
img { max-width:100%; height:auto; }

/* ── ANNOUNCE ── */
.announce-bar {
  background:var(--orange);
  color:#fff;
  text-align:center;
  padding:0.5rem 1.5rem;
  font-size:0.82rem;
  font-weight:600;
  font-family:'Inter',system-ui,sans-serif;
  letter-spacing:0.02em;
}
.announce-bar a { color:#fff; text-decoration:underline; }

/* ── TOP BAR ── */
.top-bar {
  background:var(--teal);
  padding:0.5rem 1.5rem;
}
.top-bar-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.8rem; color:var(--text-muted);
  font-family:'Inter',system-ui,sans-serif;
}
.top-bar a { color:var(--text-muted); text-decoration:none; }
.top-bar a:hover { color:var(--orange-light); }
.top-bar-contact { display:flex; gap:1.5rem; }

/* ── HEADER ── */
header {
  background:var(--teal-mid);
  padding:0 1.5rem;
  position:sticky; top:0; z-index:1000;
  border-bottom:3px solid var(--orange);
  box-shadow:0 2px 20px rgba(0,0,0,0.35);
}
.header-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; height:68px;
}
.logo-wrap { display:flex; align-items:center; gap:0.85rem; text-decoration:none; }
.logo-icon { width:42px; height:42px; }
.logo-text  { display:flex; flex-direction:column; }
.brand-name { font-size:1.05rem; font-weight:800; color:#fff; letter-spacing:0.04em; font-family:'Inter',system-ui,sans-serif; }
.brand-tag  { font-size:0.64rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.07em; font-family:'Inter',system-ui,sans-serif; }

.main-nav { display:flex; gap:0.3rem; }
.nav-link {
  padding:0.5rem 0.9rem;
  color:var(--text-muted);
  font-size:0.85rem;
  border-radius:var(--radius);
  transition:var(--transition);
  font-family:'Inter',system-ui,sans-serif;
}
.nav-link:hover { color:#fff; background:rgba(255,255,255,0.1); text-decoration:none; }
.nav-item { position:relative; }
.nav-dropdown {
  display:none; position:absolute; top:100%; left:0; min-width:190px;
  background:var(--teal-light); border-radius:var(--radius);
  padding:0.4rem 0; z-index:100; box-shadow:var(--shadow-lg);
}
.nav-item:hover .nav-dropdown { display:block; }
.nav-dropdown a { display:block; padding:0.5rem 1rem; font-size:0.83rem; color:var(--text-on-dark); text-decoration:none; }
.nav-dropdown a:hover { background:rgba(255,255,255,0.1); color:var(--orange-light); }

.header-cta { display:flex; gap:0.5rem; }
.btn-call, .btn-wa {
  display:flex; align-items:center; gap:0.4rem;
  padding:0.48rem 0.9rem; border-radius:var(--radius);
  font-size:0.82rem; font-weight:600; white-space:nowrap;
  font-family:'Inter',system-ui,sans-serif;
  text-decoration:none; transition:var(--transition);
}
.btn-call { background:var(--orange); color:#fff; }
.btn-call:hover { background:var(--orange-dark); color:#fff; }
.btn-wa { background:#25D366; color:#fff; }
.btn-wa:hover { background:#1da851; color:#fff; }
.btn-icon { width:15px; height:15px; }

/* ── BREADCRUMB ── */
.breadcrumb {
  background:var(--bg-off);
  border-bottom:1px solid var(--border);
  padding:0.6rem 1.5rem;
}
.breadcrumb-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.8rem; color:var(--text-light);
  font-family:'Inter',system-ui,sans-serif;
}
.breadcrumb a { color:var(--text-light); text-decoration:none; }
.breadcrumb a:hover { color:var(--orange); }
.breadcrumb strong { color:var(--text-body); }
.breadcrumb-sep { color:var(--border); }

/* ── HERO ── */
.page-banner {
  background:var(--teal);
  padding:0;
  border-bottom:4px solid var(--orange);
}
.hero-split {
  max-width:var(--max-w); margin:0 auto;
  display:grid; grid-template-columns:1.1fr 0.9fr;
}
.hero-text {
  padding:3.5rem 3rem 3.5rem 1.5rem;
  display:flex; flex-direction:column; justify-content:center;
}
.sec-label {
  display:inline-block;
  background:var(--orange-glow);
  border:1px solid var(--orange-border);
  color:var(--orange-light);
  padding:0.28rem 0.8rem;
  border-radius:50px;
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.09em;
  text-transform:uppercase;
  margin-bottom:1rem;
  font-family:'Inter',system-ui,sans-serif;
}
.hero-text h1 { color:#fff; font-style:normal; font-size:2rem; margin-bottom:0.7rem; }
.hero-text p  { color:var(--text-muted); margin:0; font-family:'Inter',system-ui,sans-serif; font-size:0.95rem; }
.hero-visual {
  background:var(--teal-card);
  display:flex; align-items:center; justify-content:center;
  min-height:260px;
  border-left:1px solid rgba(255,255,255,0.08);
}

/* ── FULL-WIDTH LAYOUT ── */
.fw-layout {
  max-width:var(--max-w); margin:0 auto;
  padding:2.5rem 1.5rem;
}

/* Pull badge */
.part-badge {
  display:inline-block;
  background:var(--teal);
  color:#fff;
  padding:0.32rem 1rem;
  border-radius:50px;
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.05em;
  margin-bottom:0.8rem;
  font-family:'Inter',system-ui,sans-serif;
}
.product-meta { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.5rem; }
.meta-tag {
  background:var(--bg-off);
  border:1px solid var(--border);
  padding:0.24rem 0.7rem;
  border-radius:50px;
  font-size:0.76rem; font-weight:600;
  color:var(--text-body);
  font-family:'Inter',system-ui,sans-serif;
}

/* Content section alternating */
.section-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  margin-bottom:2rem;
}
.section-pair.reverse { direction:rtl; }
.section-pair.reverse > * { direction:ltr; }

.content-block {
  background:var(--bg-white);
  border:1px solid var(--border-light);
  border-radius:var(--radius-lg);
  padding:2rem;
  margin-bottom:1.8rem;
  box-shadow:var(--shadow-sm);
}
.content-block h2 {
  font-size:1.45rem;
  border-left:4px solid var(--orange);
  padding-left:0.9rem;
  margin-bottom:1.2rem;
  font-family:'Inter',system-ui,sans-serif;
}
.content-block h3 { font-size:1.1rem; margin-top:1.2rem; }

/* Spec cards grid */
.spec-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:0.75rem;
  margin:1rem 0;
}
.spec-card {
  background:var(--bg-off);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
}
.spec-card .spec-label { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-light); font-family:'Inter',system-ui,sans-serif; font-weight:700; }
.spec-card .spec-value { font-size:1.1rem; font-weight:700; color:var(--teal); font-family:'Inter',system-ui,sans-serif; }
.spec-card .spec-note  { font-size:0.73rem; color:var(--text-light); font-family:'Inter',system-ui,sans-serif; }

/* Spec table */
.spec-table { width:100%; border-collapse:collapse; font-size:0.9rem; font-family:'Inter',system-ui,sans-serif; }
.spec-table th { background:var(--teal); color:#fff; padding:0.7rem 1rem; text-align:left; }
.spec-table td { padding:0.65rem 1rem; border-bottom:1px solid var(--border-light); }
.spec-table tr:hover td { background:var(--bg-off); }

/* Related grid */
.related-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:0.8rem;
  margin-top:1rem;
}
.related-card {
  background:var(--bg-off);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
  text-align:center;
  transition:var(--transition);
  text-decoration:none;
}
.related-card:hover { border-color:var(--orange); background:var(--orange-glow); transform:translateY(-2px); }
.related-card .part-no   { font-size:0.82rem; font-weight:700; color:var(--teal); display:block; font-family:'Inter',system-ui,sans-serif; }
.related-card .part-desc { font-size:0.72rem; color:var(--text-light); font-family:'Inter',system-ui,sans-serif; }

/* CTA strip */
.cta-strip {
  background:var(--teal);
  border-radius:var(--radius-lg);
  padding:2rem;
  margin:2rem 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}
.cta-strip h3 { color:#fff; margin:0; font-family:'Inter',system-ui,sans-serif; }
.cta-strip p  { color:var(--text-muted); margin:0; font-size:0.9rem; font-family:'Inter',system-ui,sans-serif; }
.cta-btns { display:flex; gap:0.6rem; flex-wrap:wrap; }
.btn-primary {
  background:var(--orange); color:#fff;
  padding:0.75rem 1.3rem; border-radius:var(--radius);
  font-weight:700; font-size:0.9rem;
  text-decoration:none; transition:var(--transition);
  font-family:'Inter',system-ui,sans-serif;
  display:inline-flex; align-items:center; gap:0.4rem;
}
.btn-primary:hover { background:var(--orange-dark); color:#fff; }
.btn-wa-main {
  background:#25D366; color:#fff;
  padding:0.75rem 1.3rem; border-radius:var(--radius);
  font-weight:700; font-size:0.9rem;
  text-decoration:none; transition:var(--transition);
  font-family:'Inter',system-ui,sans-serif;
  display:inline-flex; align-items:center; gap:0.4rem;
}
.btn-wa-main:hover { background:#1da851; color:#fff; }

/* FAQ */
.faq-item { border-bottom:1px solid var(--border-light); padding:1.2rem 0; }
.faq-item:last-child { border-bottom:none; }
.faq-q { font-weight:700; color:var(--teal); margin-bottom:0.5rem; font-size:1rem; font-family:'Inter',system-ui,sans-serif; }
.faq-a { color:var(--text-mid); font-size:0.92rem; margin:0; font-family:'Inter',system-ui,sans-serif; }

/* Trust */
.trust-row { display:flex; gap:1rem; flex-wrap:wrap; margin:1.5rem 0; }
.trust-badge {
  background:var(--bg-off);
  border:1px solid var(--border);
  border-radius:50px;
  padding:0.4rem 1rem;
  font-size:0.8rem; font-weight:600;
  color:var(--teal);
  font-family:'Inter',system-ui,sans-serif;
}

/* Contact */
.contact-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:1rem; margin-top:1rem;
}
.contact-item {
  background:var(--bg-off); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.1rem;
}
.contact-item h4 { font-size:0.82rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--orange); margin-bottom:0.4rem; font-family:'Inter',system-ui,sans-serif; }
.contact-item p  { font-size:0.88rem; margin:0; color:var(--text-body); font-family:'Inter',system-ui,sans-serif; }

/* Part visual */
.part-visual {
  background:var(--teal-card);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  min-height:200px;
  margin-bottom:1.5rem;
}

/* Footer */
footer {
  background:var(--teal);
  color:var(--text-muted);
  padding:3rem 1.5rem 2rem;
  margin-top:3rem;
  border-top:4px solid var(--orange);
  font-family:'Inter',system-ui,sans-serif;
}
.footer-inner {
  max-width:var(--max-w); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2rem; margin-bottom:2rem;
}
.footer-brand-name { color:#fff; font-size:1.05rem; font-weight:800; margin-bottom:0.6rem; }
.footer-about { font-size:0.82rem; color:var(--text-muted); line-height:1.6; }
.footer-col h4 { color:#fff; font-size:0.83rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.75rem; }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col li { margin-bottom:0.35rem; }
.footer-col a  { font-size:0.82rem; color:var(--text-muted); text-decoration:none; }
.footer-col a:hover { color:var(--orange-light); }
.footer-bottom {
  max-width:var(--max-w); margin:0 auto;
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:1.5rem;
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.77rem; color:var(--text-muted); flex-wrap:wrap; gap:0.5rem;
}
.footer-bottom a { color:var(--text-muted); text-decoration:none; }
.footer-bottom a:hover { color:var(--orange-light); }

/* Responsive */
@media(max-width:900px) {
  .hero-split { grid-template-columns:1fr; }
  .hero-visual { min-height:200px; }
  .section-pair { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; }
}
@media(max-width:680px) {
  h1 { font-size:1.9rem; }
  .main-nav { display:none; }
  .footer-inner { grid-template-columns:1fr; }
  .cta-strip { flex-direction:column; }
}

/* Animations */
@keyframes bounce-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes compress { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(0.7)} }
@keyframes slide-lr { 0%,100%{transform:translateX(0)} 50%{transform:translateX(20px)} }
@keyframes pulse-ring { 0%{r:18;opacity:1} 100%{r:44;opacity:0} }
@keyframes rotate-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes drill-up { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }