/* InterMet overrides for Archi industry template */

/* Brand: orange already from colors/orange.css. Slight tweaks for metal industry */
:root { --metal-accent: #f15a24; }

/* Language switcher in header info bar */
.lang-switch{display:inline-flex;gap:6px;align-items:center;margin-left:14px}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:32px;padding:4px 10px;color:#fff;text-decoration:none;font-weight:600;font-size:.85rem;border:1px solid rgba(255,255,255,.25);border-radius:4px;opacity:.7;transition:opacity .15s ease}
.lang-switch a:hover{opacity:1}
.lang-switch a.active{opacity:1;background:var(--metal-accent);border-color:var(--metal-accent)}

/* Header info bar — make our 3 cols (hours/phone/langs) fit on a single line */
header .info .col{display:inline-block;margin-right:24px;vertical-align:middle}
header .info .col.social{float:right;margin-right:0}
@media (max-width: 768px){
  header .info{font-size:.78rem;text-align:center}
  header .info .col{display:block;margin:4px 0}
  header .info .col.social{float:none}
  .lang-switch{justify-content:center;margin:6px 0 0}
}

/* Sticky WhatsApp CTA — ported from original metal site */
.metal-sticky-cta{position:fixed;bottom:24px;right:24px;padding:14px 22px;background:#25d366;color:#fff !important;border-radius:30px;text-decoration:none;font-weight:600;box-shadow:0 10px 30px -10px rgba(37,211,102,.55);z-index:99;display:inline-flex;align-items:center;gap:8px;min-height:48px;font-size:.95rem}
.metal-sticky-cta:hover{background:#1ebe5d;color:#fff !important;text-decoration:none}
@media (max-width: 576px){
  .metal-sticky-cta{bottom:16px;right:16px;padding:12px 18px;font-size:.9rem}
}

/* Lead form (re-styled to live inside Archi `#section-contact`) */
#lead-form .row{display:flex;gap:12px;margin-bottom:12px}
#lead-form .row > *{flex:1 1 0;min-width:0}
#lead-form input,#lead-form textarea{width:100%;padding:12px 14px;border:1px solid #d9d9d9;border-radius:4px;font-size:1rem;font-family:inherit;background:#fff;color:#222}
#lead-form textarea{margin-bottom:12px;resize:vertical}
#lead-form input:focus,#lead-form textarea:focus{outline:none;border-color:var(--metal-accent)}
#lead-form button{padding:14px 28px;background:var(--metal-accent);color:#fff;border:0;border-radius:4px;font-size:1rem;font-weight:600;cursor:pointer;min-height:44px}
#lead-form button:hover{background:#d94c1d}
#lead-form .form-msg{margin-top:14px;font-size:.95rem;min-height:1.4em}
#lead-form .form-msg.ok{color:#1a8a3a}
#lead-form .form-msg.err{color:#c0392b}
@media (max-width: 576px){
  #lead-form .row{flex-direction:column;gap:8px}
}

/* Category cards on catalog index — link-as-card */
.metal-cat-card{display:block;background:#fff;padding:28px 24px;text-decoration:none;color:#222 !important;border:1px solid #eee;border-radius:6px;transition:box-shadow .15s ease, transform .15s ease;height:100%}
.metal-cat-card:hover{box-shadow:0 12px 36px -16px rgba(0,0,0,.18);transform:translateY(-2px);text-decoration:none;color:#222 !important}
.metal-cat-card h3{margin:0 0 10px;font-size:1.15rem;color:#222}
.metal-cat-card .count{color:#777;font-size:.92rem}

/* Product grid card */
.metal-product-card{display:block;background:#fff;border:1px solid #eee;border-radius:6px;overflow:hidden;text-decoration:none;color:#222 !important;height:100%;transition:box-shadow .15s ease, transform .15s ease}
.metal-product-card:hover{box-shadow:0 12px 36px -16px rgba(0,0,0,.18);transform:translateY(-2px);text-decoration:none;color:#222 !important}
.metal-product-card .img{aspect-ratio:5/3;background:#f4f4f4;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid #eee}
.metal-product-card .img img{max-width:90%;max-height:80%;width:auto;height:auto}
.metal-product-card .body{padding:16px 20px 20px}
.metal-product-card h3{margin:0;font-size:1rem;color:#222}

/* Specs table on product detail */
.metal-specs{width:100%;border-collapse:collapse;margin-top:8px;background:#fff;border:1px solid #eee;border-radius:4px;overflow:hidden}
.metal-specs td{padding:10px 14px;border-bottom:1px solid #eee;vertical-align:top}
.metal-specs tr:last-child td{border-bottom:0}
.metal-specs td:first-child{color:#777;width:45%;background:#fafafa}

/* Sidebar services list on category/product pages — show active state */
#services-list li a{display:block;padding:12px 16px;border-bottom:1px solid #eee;color:#444;text-decoration:none;transition:background .15s ease, color .15s ease}
#services-list li a:hover{background:#fafafa;color:var(--metal-accent);text-decoration:none}
#services-list li.active a{background:var(--metal-accent);color:#fff}

/* Hero / subheader fallback bg (no real bg image in our copy) */
#subheader.style-2{background:linear-gradient(135deg,#2c3e50 0%,#34495e 100%);min-height:240px;display:flex;align-items:center;color:#fff;padding:60px 0}
#subheader.style-2 h1{color:#fff;margin:0 0 8px;font-size:2.2rem}
#subheader.style-2 h4{color:rgba(255,255,255,.85);font-weight:400;margin:0}
#subheader.style-2 .crumb{margin:14px 0 0;padding:0;list-style:none}
#subheader.style-2 .crumb li{display:inline-block;margin-right:8px;color:rgba(255,255,255,.7)}
#subheader.style-2 .crumb li.sep{opacity:.5}
#subheader.style-2 .crumb a{color:#fff;text-decoration:none}
#subheader.style-2 .crumb a:hover{color:var(--metal-accent)}

/* Landing hero (homepage) */
.metal-hero{background:linear-gradient(135deg,#1a252f 0%,#2c3e50 100%);color:#fff;padding:120px 0 100px;text-align:center}
.metal-hero h1{color:#fff;font-size:3rem;margin:0 0 20px;line-height:1.15}
.metal-hero .lead{color:rgba(255,255,255,.88);font-size:1.2rem;max-width:780px;margin:0 auto 32px}
.metal-hero .btn-custom{display:inline-block;padding:14px 32px;background:var(--metal-accent);color:#fff;border-radius:4px;text-decoration:none;font-weight:600;font-size:1rem;border:0}
.metal-hero .btn-custom:hover{background:#d94c1d;color:#fff;text-decoration:none}
@media (max-width: 576px){
  .metal-hero{padding:80px 0 60px}
  .metal-hero h1{font-size:2rem}
  .metal-hero .lead{font-size:1.02rem}
}

/* Section spacing — slightly tighter than Archi defaults */
section.metal-section{padding:64px 0}
@media (max-width: 768px){section.metal-section{padding:40px 0}}

/* Two-col product detail layout */
.metal-product-detail{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
@media (max-width: 900px){.metal-product-detail{grid-template-columns:1fr;gap:24px}}
.metal-product-detail .gallery img{display:block;width:100%;max-height:420px;object-fit:contain;background:#fafafa;border:1px solid #eee;border-radius:6px;margin-bottom:14px}
.metal-product-detail .desc{color:#444;font-size:1.02rem;line-height:1.6}
.metal-product-detail .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.metal-product-detail .actions .btn-wa{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;background:#25d366;color:#fff;border-radius:4px;text-decoration:none;font-weight:600;min-height:48px}
.metal-product-detail .actions .btn-wa:hover{background:#1ebe5d;color:#fff;text-decoration:none}
.metal-product-detail .actions .btn-quote{display:inline-flex;align-items:center;padding:14px 22px;background:transparent;color:var(--metal-accent) !important;border:1px solid var(--metal-accent);border-radius:4px;text-decoration:none;font-weight:600;min-height:48px}
.metal-product-detail .actions .btn-quote:hover{background:var(--metal-accent);color:#fff !important;text-decoration:none}

/* Footer tweaks */
footer{background:#1a252f;color:#d8dce0;padding:48px 0 24px;margin-top:60px}
footer a{color:#fff}
footer a:hover{color:var(--metal-accent)}
footer .footer-nav{list-style:none;padding:0;margin:0}
footer .footer-nav li{margin-bottom:8px;color:#d8dce0}
footer .footer-nav li i{color:var(--metal-accent);margin-right:6px;width:18px;text-align:center}
footer .footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-bottom:32px;border-bottom:1px solid #2a3845;margin-bottom:24px}
footer h4{color:#fff;font-size:1.05rem;margin:0 0 14px}
footer p{color:#d8dce0 !important}
footer .copyright{text-align:center;color:#9aa5af;font-size:.9rem;margin-top:18px}
@media (max-width: 768px){footer .footer-cols{grid-template-columns:1fr;gap:24px}}

/* Service / category card on home + services index — Archi-style with image */
.metal-service-tile{background:#fff;border-radius:6px;overflow:hidden;border:1px solid #eee;height:100%;display:flex;flex-direction:column;text-decoration:none;color:#222 !important;transition:box-shadow .15s ease, transform .15s ease}
.metal-service-tile:hover{box-shadow:0 14px 40px -18px rgba(0,0,0,.22);transform:translateY(-3px);text-decoration:none;color:#222 !important}
.metal-service-tile .pic{aspect-ratio:5/3;background:#f4f4f4 center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:#bbb}
.metal-service-tile .body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column}
.metal-service-tile .body h3{margin:0 0 10px;font-size:1.1rem;color:#222}
.metal-service-tile .body p{margin:0;color:#666;font-size:.94rem;flex:1}
.metal-service-tile .body .more{margin-top:14px;color:var(--metal-accent);font-weight:600;font-size:.92rem}

/* Generic grid */
.metal-grid{display:grid;gap:24px}
.metal-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.metal-grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width: 900px){
  .metal-grid.cols-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 576px){
  .metal-grid.cols-3,.metal-grid.cols-2{grid-template-columns:1fr}
}

/* Why-choose-us / feature icons row */
.metal-features{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:28px}
.metal-feature{display:flex;gap:14px;align-items:flex-start}
.metal-feature .ico{width:48px;height:48px;border-radius:50%;background:var(--metal-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.metal-feature h3{font-size:1.05rem;margin:0 0 4px;color:#222}
.metal-feature p{color:#666;margin:0;font-size:.94rem}
@media (max-width: 900px){.metal-features{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 576px){.metal-features{grid-template-columns:1fr}}

/* Section title centered */
.metal-section-title{text-align:center;margin-bottom:36px}
.metal-section-title h2{margin:0 0 8px;font-size:2rem;color:#222}
.metal-section-title .lead{color:#666;font-size:1.05rem;margin:0;max-width:680px;margin-left:auto;margin-right:auto}

/* CTA strip */
.metal-cta-strip{background:var(--metal-accent);color:#fff;padding:40px 0;text-align:center}
.metal-cta-strip h3{color:#fff;margin:0 0 12px;font-size:1.5rem}
.metal-cta-strip a{display:inline-block;background:#fff;color:var(--metal-accent) !important;padding:12px 28px;border-radius:4px;text-decoration:none;font-weight:600;margin-top:6px}
.metal-cta-strip a:hover{background:#1a252f;color:#fff !important;text-decoration:none}

/* Body should not be hidden by Archi's #wrapper fadein-on-load if JS doesn't run */
#wrapper{opacity:1 !important}

/* Hide Archi-template-only chrome that doesn't make sense without their JS */
.no-stellar{background-attachment:scroll !important}

/* Main menu styling — keep simple since we don't load Archi nav JS */
.metal-mainmenu{list-style:none;padding:0;margin:0;display:flex;gap:24px;align-items:center}
.metal-mainmenu a{color:#222;text-decoration:none;font-weight:500;font-size:.95rem;padding:8px 0;display:inline-block}
.metal-mainmenu a:hover,.metal-mainmenu a.active{color:var(--metal-accent)}
@media (max-width: 768px){
  .metal-mainmenu{flex-wrap:wrap;gap:14px;justify-content:center;margin-top:8px}
  .metal-mainmenu a{font-size:.92rem}
}

/* Header layout */
.metal-header-main{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:24px;flex-wrap:wrap}
.metal-header-main .logo{font-size:1.5rem;font-weight:700;color:#1a252f;text-decoration:none;letter-spacing:.5px}
.metal-header-main .logo span{color:var(--metal-accent)}
.metal-header-main .logo:hover{text-decoration:none;color:#1a252f}
.metal-header-info{background:#1a252f;color:#fff;padding:8px 0;font-size:.88rem;display:block !important}
.metal-header-info a{color:#fff}
/* Archi's `header .info{display:none}` hides our info bar — force it on */
header .info.metal-header-info{display:block !important}
@media (max-width: 768px){
  .metal-header-main{flex-direction:column;align-items:center;text-align:center}
}

/* ============================================================================
 * KILLER OVERRIDES — Archi's style.css has:
 *   html { background:#000 !important }    ← black canvas, expected to be hidden by content
 *   body { display:none }                  ← Archi's preloader JS un-hides on load
 * We don't load Archi's preloader JS (designesia.js) — so body would stay hidden
 * and only the black html bg would show. Force light theme + always-visible body.
 * ============================================================================ */
html { background: #ffffff !important; }
body { display: block !important; background: #ffffff !important; color: #333 !important; }
#preloader, #de-preloader { display: none !important; }

/* Page text colour fallback (Archi default is #bbb on dark bg — invisible on white) */
body, p, li, td, th { color: #444; }
h1, h2, h3, h4, h5, h6 { color: #181818; }
a { color: var(--metal-accent, #f15a24); }

/* === Boost specificity over Archi `.de_light section { background:#fff }` === */
.de_light section.metal-hero,
section.metal-hero { background: linear-gradient(135deg,rgba(26,37,47,.85) 0%,rgba(44,62,80,.75) 100%), url('/images/hero/metal-hero.jpg') center/cover no-repeat !important; color: #fff !important; }
.de_light section.metal-hero h1,
section.metal-hero h1 { color: #fff !important; }
.de_light section.metal-hero .lead,
section.metal-hero .lead { color: rgba(255,255,255,.88) !important; }

/* Sticky WhatsApp — put it in bottom-left so it doesn't overlap the right column of services grid */
.sticky-wa-cta{left:20px;right:auto !important}
@media(max-width:768px){.sticky-wa-cta{left:14px;right:auto !important}}

/* 24/7 → daily — drop the placeholder text entirely on the Why-Us tile */
.why-us-247-tile{display:none !important}

/* Sticky CTA actually uses .metal-sticky-cta class (was named wrong before). Move to bottom-left. */
.metal-sticky-cta{left:20px !important;right:auto !important;bottom:20px !important}
@media(max-width:768px){.metal-sticky-cta{left:14px !important;right:auto !important;bottom:14px !important}}

/* Sticky CTA overlaps the left sidebar (#services-list) on category/product pages.
   Push category/product main grid down a bit + add bottom-padding so the CTA never
   sits on top of the last sidebar item. */
.metal-product-detail, .category-grid, #services-list { margin-bottom: 80px; }
@media(max-width:768px){
  .metal-product-detail, .category-grid, #services-list { margin-bottom: 70px; }
}

/* Mobile header chrome: the H1 + breadcrumb in #subheader can run into the logo
   on small screens because Archi's #header floats the logo on a separate row.
   Stack everything cleanly and add top padding so the page title doesn't kiss
   the menu. */
@media(max-width:768px){
  #subheader.style-2 { padding: 32px 0 24px; min-height: 0; text-align: center; }
  #subheader.style-2 h1 { font-size: 1.6rem; }
  #subheader.style-2 .crumb { font-size: .82rem; }
  .metal-header-main { padding: 12px 0; gap: 10px; }
  .metal-mainmenu { gap: 10px; font-size: .85rem; }
}

/* Nav links — Archi default #222 is invisible on the dark #181b1d header bg.
   Force light text with brand accent on hover/active. */
header #mainmenu a,
header nav a,
header .mainmenu a,
header .navbar-nav a { color: rgba(255,255,255,0.92) !important; font-weight: 500; transition: color .15s ease; }
header #mainmenu a:hover,
header #mainmenu a.active,
header nav a:hover,
header .mainmenu a:hover,
header .navbar-nav a:hover { color: var(--metal-accent, #f15a24) !important; }

/* Fixed header is 80px tall but body has no top padding — content slid under it.
   Push everything below the fixed header. Hero already has its own top padding so
   only inner pages need this; but easiest is body-level. */
body { padding-top: 80px !important; }
/* But the hero on the LANDING uses its own padding-top:120px so it doesn't need
   extra spacing. Override hero's top padding to keep visual rhythm. */
.de_light section.metal-hero,
section.metal-hero { padding-top: 60px !important; }
@media(max-width:768px){
  body { padding-top: 70px !important; }
  .de_light section.metal-hero,
  section.metal-hero { padding-top: 40px !important; }
}

/* Main nav row (.metal-header-main) was transparent over hero images; force dark bg */
header .metal-header-main { background: rgb(24,25,27) !important; }

/* ============================================================================
 * NAV REDESIGN 2026-06-01 — single-row sticky header, polished hierarchy
 * Overrides Archi vendor CSS + earlier overrides. New markup: header.metal-nav
 * Goals: visible "InterMet" wordmark, single row, hover/active states, CTA,
 * functional burger on mobile.
 * ============================================================================ */

/* Neutralise legacy rules that fought the old two-row header */
body { padding-top: 0 !important; }
.de_light section.metal-hero,
section.metal-hero { padding-top: 110px !important; }
@media (max-width: 768px){
  .de_light section.metal-hero,
  section.metal-hero { padding-top: 80px !important; }
}
/* Old info-bar rules are now moot (markup removed), but defensively zero them */
header .info .col { display: inline-block; }
header .info.metal-header-info { /* class is reused on new header; new rules below win */ }

/* --- New sticky header ----------------------------------------------------- */
header.metal-nav {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #181b1d !important;
  color: #fff;
  border-bottom: 1px solid rgba(241,90,36,0);
  transition: box-shadow .2s ease, border-color .2s ease;
}
header.metal-nav.is-scrolled {
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  border-bottom-color: rgba(241,90,36,.4);
}
body { padding-top: 72px !important; }
@media (max-width: 768px){ body { padding-top: 56px !important; } }

.metal-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Logo wordmark — beat vendor `header .logo` rules */
header.metal-nav a.logo.metal-logo,
header.metal-nav .metal-logo {
  display: inline-flex !important;
  align-items: center;
  min-width: 140px !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: none !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
  text-decoration: none !important;
  text-transform: none !important;
  font-family: 'Poppins', 'Roboto', system-ui, sans-serif !important;
}
header.metal-nav .metal-logo span {
  color: var(--metal-accent, #f15a24) !important;
}
header.metal-nav .metal-logo:hover { color: #fff !important; }

/* Nav links */
header.metal-nav .metal-nav-links { flex: 1; }
header.metal-nav .metal-mainmenu {
  list-style: none; padding: 0; margin: 0;
  display: flex; align-items: center; gap: 28px;
  justify-content: center;
}
header.metal-nav .metal-mainmenu li { margin: 0; padding: 0; }
header.metal-nav .metal-mainmenu a {
  position: relative;
  display: inline-block;
  padding: 8px 2px;
  color: rgba(255,255,255,.82) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  letter-spacing: .01em;
  transition: color .15s ease;
  background: transparent !important;
}
header.metal-nav .metal-mainmenu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--metal-accent, #f15a24);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}
header.metal-nav .metal-mainmenu a:hover { color: #fff !important; }
header.metal-nav .metal-mainmenu a:hover::after { transform: scaleX(1); }
header.metal-nav .metal-mainmenu a.active {
  color: var(--metal-accent, #f15a24) !important;
}
header.metal-nav .metal-mainmenu a.active::after { transform: scaleX(1); }

/* Right action group */
header.metal-nav .metal-nav-actions {
  display: flex; align-items: center; gap: 16px;
  margin-left: auto;
}

/* Lang switcher — pill */
header.metal-nav .lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 3px;
  margin: 0;
}
header.metal-nav .lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 26px; padding: 0 8px;
  border: 0 !important;
  border-radius: 999px;
  color: rgba(255,255,255,.7) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none !important;
  opacity: 1;
  transition: background .15s ease, color .15s ease;
}
header.metal-nav .lang-switch a:hover { color: #fff !important; background: rgba(255,255,255,.06); }
header.metal-nav .lang-switch a.active {
  background: var(--metal-accent, #f15a24) !important;
  color: #fff !important;
}

/* WhatsApp icon button */
header.metal-nav .metal-nav-wa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #25d366;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 18px;
  transition: background .15s ease, transform .15s ease;
  flex-shrink: 0;
}
header.metal-nav .metal-nav-wa:hover { background: #1ebe5d; transform: translateY(-1px); }

/* Primary CTA */
header.metal-nav .metal-nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px;
  padding: 0 18px;
  background: var(--metal-accent, #f15a24);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
header.metal-nav .metal-nav-cta:hover { background: #d94c1d; transform: translateY(-1px); }

/* Burger — hidden on desktop */
header.metal-nav .metal-burger {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
header.metal-nav .metal-burger span {
  display: block;
  width: 18px; height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease;
}
header.metal-nav .metal-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
header.metal-nav .metal-burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
header.metal-nav .metal-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobile slide-down panel */
header.metal-nav .metal-mobile-panel {
  display: none;
  background: #181b1d;
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.32);
}
header.metal-nav .metal-mobile-panel:not([hidden]) { display: block; }
header.metal-nav .metal-mobile-cta {
  display: flex;
  width: 100%;
  height: 48px;
  margin-bottom: 12px;
}
header.metal-nav .metal-mobile-menu {
  list-style: none; padding: 0; margin: 0 0 12px;
}
header.metal-nav .metal-mobile-menu li { border-bottom: 1px solid rgba(255,255,255,.06); }
header.metal-nav .metal-mobile-menu li:last-child { border-bottom: 0; }
header.metal-nav .metal-mobile-menu a {
  display: flex; align-items: center;
  min-height: 48px; padding: 0 4px;
  color: rgba(255,255,255,.9) !important;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none !important;
}
header.metal-nav .metal-mobile-menu a.active { color: var(--metal-accent, #f15a24) !important; }
header.metal-nav .metal-mobile-langs {
  margin-top: 4px;
  justify-content: center;
}

/* ---- Mobile layout ---- */
@media (max-width: 768px) {
  .metal-nav-inner {
    height: 56px;
    padding: 0 14px;
    gap: 8px;
  }
  header.metal-nav a.logo.metal-logo,
  header.metal-nav .metal-logo {
    font-size: 22px !important;
    min-width: 0 !important;
  }
  header.metal-nav .metal-nav-links { display: none; }
  header.metal-nav .metal-nav-actions { gap: 8px; }
  header.metal-nav .metal-nav-actions .lang-switch,
  header.metal-nav .metal-nav-actions .metal-nav-cta { display: none; }
  header.metal-nav .metal-nav-wa { width: 40px; height: 40px; font-size: 20px; }
  header.metal-nav .metal-burger { display: flex; }
}
@media (min-width: 769px) {
  header.metal-nav .metal-burger { display: none; }
  header.metal-nav .metal-mobile-panel { display: none !important; }
}

/* ============ CONTACT FORM ALIGNMENT 2026-06-03 ============
 * Submit button was sticking to far-left of the form area while inputs ran full-width.
 * Constrain form max-width for visual rhythm + center the submit button on desktop,
 * full-width on mobile. Also tighten input row spacing. */
section#contact form#lead-form {
    max-width: 720px;
    margin: 0 auto;
}
section#contact form#lead-form .row {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
}
section#contact form#lead-form .row > input { flex: 1; min-width: 0; }
section#contact form#lead-form input[type="text"],
section#contact form#lead-form input[type="tel"],
section#contact form#lead-form input[type="email"],
section#contact form#lead-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d8d8d4;
    border-radius: 6px;
    font: inherit;
    background: #fff;
    transition: border-color .15s;
}
section#contact form#lead-form input:focus,
section#contact form#lead-form textarea:focus {
    border-color: var(--metal-accent, #f15a24);
    outline: 0;
}
section#contact form#lead-form textarea { min-height: 120px; resize: vertical; margin-bottom: 18px; }

section#contact form#lead-form button[type="submit"] {
    display: block;
    margin: 6px auto 0;
    padding: 13px 38px;
    background: var(--metal-accent, #f15a24);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    min-width: 200px;
    transition: background .15s;
}
section#contact form#lead-form button[type="submit"]:hover {
    background: #d34818;
}

@media (max-width: 640px) {
    section#contact form#lead-form .row { flex-direction: column; gap: 14px; }
    section#contact form#lead-form button[type="submit"] { width: 100%; min-width: 0; }
}

/* === 2026-06-08 — client feedback batch === */

/* Belt-and-suspenders: prevent horizontal scroll regardless of children */
html, body { overflow-x: hidden; max-width: 100%; }

/* Logo image sizing (header img replaced text wordmark) */
header.metal-nav .metal-logo img {
  display: block;
  height: 52px;
  width: auto;
  max-width: 200px;
}
@media (max-width: 768px) {
  header.metal-nav .metal-logo img { height: 40px; }
}

/* "Back to main InterMet" button in header */
.metal-back-to-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  color: #fff !important;
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
}
.metal-back-to-main:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.32);
}
.metal-back-to-main img { display: block; height: 22px; width: auto; }
.metal-back-to-main i { margin-left: 4px; font-size: .75em; opacity: .8; }
@media (max-width: 900px) {
  .metal-back-to-main span { display: none; }
  .metal-back-to-main { padding: 6px 8px; }
}

/* "Back to main" banner in footer */
.footer-back-to-main {
  margin: 16px 0 8px;
  text-align: center;
}
.footer-back-to-main a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: #fff !important;
  text-decoration: none !important;
  font-size: .98rem;
  font-weight: 500;
  transition: background .2s, transform .15s;
}
.footer-back-to-main a:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}
.footer-back-to-main img { display: block; height: 36px; width: auto; }
.footer-back-to-main i { margin-left: 6px; color: var(--metal-accent); }
@media (max-width: 600px) {
  .footer-back-to-main a { flex-direction: column; gap: 8px; text-align: center; }
  .footer-back-to-main span { font-size: .9rem; }
}

/* Stronger nav active state — underline + bold accent */
header.metal-nav .metal-mainmenu a.active {
  color: var(--metal-accent, #f15a24) !important;
  font-weight: 700 !important;
}
header.metal-nav .metal-mainmenu a.active::after {
  transform: scaleX(1) !important;
  background: var(--metal-accent, #f15a24) !important;
  height: 3px !important;
}

/* Contact form: email field full-width below name/phone row */
#lead-form input[type="email"] {
  width: 100%;
  margin-top: 10px;
}

/* Constrain .wm watermark number (Archi vendor sets width:1200px which overflows narrow viewports) */
.metal-section-title { overflow: hidden; position: relative; }
.metal-section-title .wm { width: 100% !important; max-width: 100%; left: 0 !important; right: 0 !important; text-align: center; }
.metal-hero, .metal-cta-strip, section.metal-section { overflow: hidden; }

/* Prevent nav link text-wrap (e.g. "О нас" should stay on one line) */
header.metal-nav .metal-mainmenu a { white-space: nowrap; }

/* About section — multi-paragraph readable style */
.metal-about-body {
  color: #444;
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 760px;
  margin: 0 auto;
}
.metal-about-body p { margin: 0 0 16px; }
.metal-about-body p:last-child { margin-bottom: 0; }