/* ============================================================
   ACERO ALLOYS — main theme
   ------------------------------------------------------------
   Every colour resolves to a CSS variable. The variables are
   re-declared per page by includes/header.php from the Master
   Control Panel settings, so changing the brand colours in
   /admin/ restyles the whole site, the calculators and the
   generated PDFs without touching this file.
   ============================================================ */

:root{
  --primary:#2e3947;
  --secondary:#5d6c7c;
  --accent:#c8102e;
  --accent-2:#e5435c;
  --bg:#f4f5f7;
  --text:#212830;
  --header-bg:#ffffff;
  --footer-bg:#21262d;
  --border:#d9dee4;

  --surface:#ffffff;
  --surface-2:#eef0f3;
  --muted:#5a6472;
  --ok:#1d8a4b;
  --err:#c0392b;
  --radius:10px;
  --radius-lg:14px;
  --shadow:0 6px 24px rgba(24,32,44,.08);
  --shadow-lg:0 18px 44px rgba(24,32,44,.14);
  --ff-head:'Oswald','Arial Narrow',sans-serif;
  --ff-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:72px;
}

/* ------------------------------------------------ reset/base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--ff-body);font-size:16px;line-height:1.65;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--ff-head);line-height:1.15;letter-spacing:.4px;color:var(--primary);margin:0 0 .55em}
h1{font-size:clamp(1.9rem,4vw,3rem);text-transform:uppercase}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem);text-transform:uppercase;letter-spacing:.8px}
h3{font-size:1.12rem;letter-spacing:.5px}
p{margin:0 0 1em}
.container{width:min(1200px,92vw);margin-inline:auto}
.section{margin:0 0 46px}
.section > h2{border-left:4px solid var(--accent);padding-left:14px}
.eyebrow{
  display:inline-block;font-family:var(--ff-head);font-size:.78rem;font-weight:600;
  letter-spacing:2.6px;text-transform:uppercase;color:var(--accent);margin:0 0 10px;
}
.lead{font-size:1.08rem;color:var(--muted);max-width:70ch}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:10px 16px;z-index:2000;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}
:target{scroll-margin-top:calc(var(--header-h) + 20px)}

/* ------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ff-head);font-size:.92rem;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;border-radius:8px;padding:13px 24px;cursor:pointer;
  border:1.5px solid transparent;text-decoration:none;transition:all .2s var(--ease);
  line-height:1.1;
}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--primary)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-light{background:#fff;border-color:#fff;color:var(--accent)}
.btn-light:hover{filter:brightness(.96)}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ------------------------------------------------ topbar */
.site-header{position:sticky;top:0;z-index:1000;box-shadow:0 2px 14px rgba(24,32,44,.07)}
.topbar{background:var(--primary);color:#dfe4ea;font-size:.82rem}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:36px;flex-wrap:wrap;padding:4px 0}
.topbar__contact{display:flex;gap:18px;flex-wrap:wrap}
.topbar__contact a{color:#dfe4ea;display:inline-flex;align-items:center;gap:6px}
.topbar__contact a:hover{color:#fff;text-decoration:none}
.topbar__contact svg{width:13px;height:13px}
.topbar__loc{color:#aab4c0;letter-spacing:.3px}
.topbar__search{
  display:flex;align-items:center;gap:7px;flex:0 1 auto;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:3px 12px;
}
.topbar__search:focus-within{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.17)}
.topbar__search svg{width:13px;height:13px;flex:0 0 auto;color:#c3cdd8}
.topbar__search input{
  background:transparent;border:0;outline:0;color:#fff;
  font:inherit;font-size:.8rem;width:190px;min-width:0;
}
.topbar__search input::placeholder{color:#9fb0bd}
.topbar__search input::-webkit-search-cancel-button{-webkit-appearance:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:1100px){
  .topbar__search{flex:1 1 100%;order:3}
  .topbar__search input{width:100%}
  /* the flyout rail starts below the header, so the topbar may use the full
     width — the 88px inset only shields page content from the rail */
  .topbar .container{width:min(1200px,calc(100% - 32px))}
  /* stacked layout: center the top row (contacts alone on phones, contacts +
     tagline as a group on tablets) */
  .topbar__inner{justify-content:center}
}
@media(max-width:720px){
  .topbar__loc{display:none}
  /* phone + email share one centered row; the search pill sits on the row
     below */
  .topbar__contact{flex-wrap:nowrap;gap:10px}
  .topbar__contact a{gap:5px;white-space:nowrap}
  .topbar__contact svg{width:12px;height:12px}
}

/* ------------------------------------------------ navbar */
.navbar{background:var(--header-bg)}
.navbar__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:var(--header-h)}
/* the logo must never be flex-squeezed: when the menu row runs out of room,
   the brand is the only shrinkable item and collapses to zero width */
.brand{flex:0 0 auto}
.brand__logo{max-height:52px;width:auto}
/* the navbar band is a little wider than the page container so the full
   desktop menu and the CTA fit beside the logo */
@media(min-width:1351px){.navbar .container{width:min(1300px,calc(100% - 32px))}}
.mainnav{display:flex;align-items:center;gap:2px}
.mainnav__list{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.mainnav__item{position:relative}
.mainnav__item > a,.mainnav__drop{
  display:inline-flex;align-items:center;gap:4px;padding:9px 7px;
  font-family:var(--ff-head);font-size:.8rem;font-weight:500;letter-spacing:.5px;
  text-transform:uppercase;color:var(--primary);background:none;border:0;cursor:pointer;
  border-bottom:2.5px solid transparent;white-space:nowrap;
}
.mainnav__item > a{font-family:var(--ff-head);text-decoration:none}
.mainnav__item > a:hover,.mainnav__drop:hover,.mainnav__item.is-active > a,.mainnav__item.is-active > .mainnav__drop{
  color:var(--accent);border-bottom-color:var(--accent);text-decoration:none
}
.mainnav__drop svg{width:12px;height:12px;transition:transform .2s var(--ease)}
.mainnav__item.is-open .mainnav__drop svg{transform:rotate(180deg)}
.navbar__cta{margin-left:10px;padding:9px 14px}

/* dropdown panels */
.drop{
  position:absolute;top:100%;left:0;min-width:250px;background:var(--surface);
  border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:0 0 10px 10px;
  box-shadow:var(--shadow-lg);padding:12px 0;display:none;z-index:1100;
}
.mainnav__item.is-open .drop,.mainnav__item:hover .drop{display:block}
.drop__cols{display:grid;grid-template-columns:1fr 1fr;min-width:520px}
.drop__list{list-style:none;margin:0;padding:0 14px;min-width:250px}
.drop__list li + li{margin:0}
.drop__list a{
  display:block;padding:9px 10px;border-radius:7px;color:var(--primary);
  font-size:.9rem;text-decoration:none;
}
.drop__list a:hover,.drop__list a.is-here{background:var(--surface-2);color:var(--accent)}
.drop__all{font-weight:600;color:var(--accent)}
#dropTech .drop__list{min-width:270px}

/* nav toggle (mobile) — the menu drops to the hamburger below 1350px, the
   narrowest width at which the full menu, CTA and logo fit side by side */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--primary);margin:5px 0;transition:all .25s var(--ease)}
@media(max-width:1350px){
  .nav-toggle{display:block}
  .navbar__inner{flex-wrap:wrap}
  .mainnav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);
    border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg);
    flex-direction:column;align-items:stretch;padding:10px 16px 18px;max-height:calc(100vh - var(--header-h));overflow:auto;
  }
  .mainnav.is-open{display:flex}
  .mainnav__list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .mainnav__item > a,.mainnav__drop{justify-content:space-between;width:100%;padding:13px 6px;border-bottom:1px solid var(--border)}
  .mainnav__drop{justify-content:space-between}
  .drop{position:static;display:none;min-width:0;border:0;box-shadow:none;padding:0 0 8px;background:transparent}
  .mainnav__item.is-open .drop{display:block}
  .mainnav__item:hover .drop{display:none}
  .mainnav__item.is-open:hover .drop{display:block}
  .drop__cols{grid-template-columns:1fr;min-width:0}
  .drop__list{padding:0 12px}
  .navbar__cta{margin:14px 0 0}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle.is-open span:nth-child(2){opacity:0}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* ------------------------------------------------ page hero */
.page-hero{
  background:linear-gradient(120deg,var(--primary) 0%,#3c4a5c 55%,#46566b 100%);
  color:#fff;padding:52px 0 46px;position:relative;overflow:hidden;
}
.page-hero::after{
  content:"";position:absolute;inset:0;opacity:.08;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 34px,#fff 34px 35px);
}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{color:#fff;margin-bottom:10px}
.page-hero .lead{color:#cfd7e0;margin-bottom:18px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
/* ghost buttons sit on the dark hero gradient — white text, white fill on hover */
.page-hero .btn-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.page-hero .btn-ghost:hover{background:#fff;border-color:#fff;color:var(--accent)}
.crumbs{font-size:.82rem;color:#aab4c0;margin-bottom:16px}
.crumbs a{color:#d7dee6}
.crumbs a:hover{color:#fff}
.crumbs .current{color:#9aa5b1}

/* ------------------------------------------------ layout + right sidebar */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:34px;padding:34px 0 10px;align-items:start}
.matnav{
  position:sticky;top:calc(var(--header-h) + 18px);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  max-height:calc(100vh - var(--header-h) - 36px);overflow:auto;box-shadow:var(--shadow);
}
.matnav__head{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-bottom:2px solid var(--accent);
}
.matnav__head h2{font-size:.95rem;letter-spacing:1.4px;margin:0;color:var(--primary)}
.matnav__close{display:none;background:none;border:0;cursor:pointer;color:var(--primary);padding:4px}
.matnav__body{padding:6px 0}
.matnav__list{list-style:none;margin:0;padding:0}
.matnav__link{
  display:block;padding:8px 16px;font-weight:600;font-size:.9rem;color:var(--primary);
  text-decoration:none;border-left:3px solid transparent;
}
.matnav__link:hover{background:var(--surface-2);color:var(--accent);text-decoration:none}
.matnav__item.is-here > .matnav__link{
  background:var(--surface-2);color:var(--accent);border-left-color:var(--accent);
}
.matnav__grades{border-left:3px solid transparent}
.matnav__item.is-here .matnav__grades{border-left-color:var(--accent)}
.matnav__grades summary{
  cursor:pointer;font-size:.74rem;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);padding:4px 16px;user-select:none;list-style:none;display:flex;gap:6px;align-items:center;
}
.matnav__grades summary::before{content:"▸";transition:transform .15s var(--ease);font-size:.8rem}
.matnav__grades[open] summary::before{transform:rotate(90deg)}
.matnav__grades summary::-webkit-details-marker{display:none}
.matnav__grades ul{list-style:none;margin:0;padding:2px 0 8px}
.matnav__grades li{font-size:.82rem;color:var(--muted);padding:3px 16px 3px 30px}
.matnav__uns{color:#9aa5b1;font-size:.72rem}
.matnav__foot{padding:14px 16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:9px}

/* floating left-edge tabs */
.matnav-fab{display:none}
/* The rail hangs in the space below the sticky header (--header-total is
   measured by main.js; 150px covers topbar + navbar before JS runs) and
   centres its tabs inside that free area. safe center keeps the first tab
   right under the header when the viewport is too short to fit both. */
.side-tabs{
  display:none;flex-direction:column;align-items:flex-start;justify-content:safe center;gap:10px;
  position:fixed;left:0;top:calc(var(--header-total,150px) + 6px);bottom:6px;
  z-index:990;overflow-y:auto;
}
/* Short viewports (landscape phones): keep the rail usable below the header */
@media(max-height:520px){
  .matnav-fab,.qq-fab{padding:10px 8px;gap:8px}
  .matnav-fab span,.qq-fab span{font-size:.64rem;letter-spacing:1.6px}
}
.qq-flyout{
  display:none;
  position:fixed;inset:0 auto 0 0;width:min(88vw,340px);z-index:1500;
  flex-direction:column;background:var(--surface);border-right:1px solid var(--border);
  max-height:none;overflow:auto;
  transform:translateX(-102%);transition:transform .28s var(--ease);
  box-shadow:var(--shadow-lg);
}
.matnav-fab,.qq-fab{
  display:inline-flex;flex-direction:column;align-items:center;gap:14px;
  background:var(--primary);color:#fff;border:0;border-radius:0 12px 12px 0;
  padding:20px 10px;cursor:pointer;box-shadow:var(--shadow-lg);
}
.matnav-fab:hover,.qq-fab:hover{background:var(--accent)}
.qq-fab{background:var(--accent)}
.qq-fab:hover{background:var(--primary)}
.matnav-fab span,.qq-fab span{
  writing-mode:vertical-rl;white-space:nowrap;
  font-family:var(--ff-head);font-size:.74rem;letter-spacing:2.2px;text-transform:uppercase;
}
.matnav-fab svg,.qq-fab svg{width:15px;height:15px}

/* quick-quote flyout — same slide-in behaviour as the materials drawer */
.qq-flyout.is-open{transform:translateX(0)}
.qq-flyout__head{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-bottom:2px solid var(--accent);
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.qq-flyout__head h2{font-size:.95rem;letter-spacing:1.4px;margin:0;color:var(--primary)}
.qq-flyout__close{background:none;border:0;cursor:pointer;color:var(--primary);padding:4px}
.qq-flyout__close svg{width:18px;height:18px;display:block}
.qq-flyout__body{padding:16px}
.qq-flyout__lead{margin:0 0 14px;font-size:.84rem;color:var(--muted);line-height:1.55}
.qq-flyout__actions{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.qq-flyout__actions a{
  display:block;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:9px 12px;text-decoration:none;
}
.qq-flyout__actions a:hover{border-color:var(--accent)}
.qq-flyout__actions b{
  display:block;font-family:var(--ff-head);font-size:.72rem;letter-spacing:1px;
  text-transform:uppercase;color:var(--primary);
}
.qq-flyout__actions span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px;word-break:break-all}
.qq-flyout .form-grid{gap:11px}

@media(max-width:1100px){
  /* The two stacked vertical tabs (~40px wide) are pinned to the left edge,
     so every container keeps a 44px margin on both sides and no content
     ever sits underneath them. Percentages, not vw — vw counts the scrollbar. */
  .container{width:min(1200px,calc(100% - 88px))}
  .layout{grid-template-columns:minmax(0,1fr)}
  .matnav{
    position:fixed;inset:0 auto 0 0;width:min(88vw,340px);z-index:1500;
    max-height:none;border-radius:0;border-top:0;border-bottom:0;
    transform:translateX(-102%);transition:transform .28s var(--ease);
    box-shadow:var(--shadow-lg);
  }
  .matnav.is-open{transform:translateX(0)}
  .matnav__close{display:block}
  /* Quick Quote tab above Browse Materials — both thin vertical tabs on the
     left edge, below the site header (z-index 1000) so the open mobile menu
     always draws above them */
  .side-tabs{display:flex}
  .qq-flyout{display:flex}
}

/* Desktop: the centred container (92vw, capped at 1200px) always leaves a
   44px+ left gutter, so the ~40px tabs fit without covering content at any
   desktop width. */
@media(min-width:1101px){
  .side-tabs{display:flex}
  .matnav.is-open{
    position:fixed;inset:0 auto 0 0;width:min(88vw,340px);z-index:1500;
    max-height:none;border-radius:0;border-top:0;border-bottom:0;
    transform:none;background:var(--surface);
    box-shadow:var(--shadow-lg);
  }
  .matnav.is-open .matnav__close{display:block}
  .qq-flyout{display:flex}
}

/* ------------------------------------------------ spec strip / cards */
.spec-strip{
  display:flex;gap:14px;flex-wrap:wrap;margin:22px 0 4px;
}
.spec-strip > div{
  flex:1 1 150px;background:var(--surface);border:1px solid var(--border);
  border-top:3px solid var(--accent);border-radius:var(--radius);padding:14px 18px;
}
.spec-strip b{display:block;font-family:var(--ff-head);font-size:1.35rem;color:var(--primary)}
.spec-strip span{font-size:.8rem;color:var(--muted);letter-spacing:.4px}

.grade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.grade-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 18px 14px;box-shadow:var(--shadow);
}
.grade-card h3{margin-bottom:6px;color:var(--primary)}
.grade-card__eq{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.grade-card__eq span{
  font-size:.72rem;letter-spacing:.5px;background:var(--surface-2);color:var(--muted);
  border-radius:5px;padding:3px 8px;
}
.grade-card p{font-size:.9rem;color:var(--muted);margin:0}

/* ------------------------------------------------ certifications */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.cert-card{
  display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
}
.cert-card__img{
  display:block;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  background:var(--surface-2);line-height:0;
}
.cert-card__img img{display:block;width:100%;height:250px;object-fit:cover;object-position:top;transition:transform .25s var(--ease)}
.cert-card__img:hover img{transform:scale(1.02)}
.cert-card h3{margin:4px 0 0;color:var(--primary)}
.cert-card__sub{margin:0;font-size:.82rem;color:var(--muted)}
.cert-facts{margin:6px 0 0;display:grid;gap:5px}
.cert-facts div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.8rem;border-bottom:1px dashed var(--border);padding-bottom:4px}
.cert-facts dt{color:var(--muted);flex-shrink:0}
.cert-facts dd{margin:0;font-weight:600;color:var(--primary);text-align:right}
.cert-card__link{margin-top:auto;padding-top:8px;font-family:var(--ff-head);font-size:.78rem;letter-spacing:1.2px;text-transform:uppercase}

.iso-band{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:22px 26px;box-shadow:var(--shadow);margin-top:16px;
}
.iso-badges{display:flex;gap:12px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.iso-badges li{
  display:flex;flex-direction:column;gap:2px;background:var(--surface-2);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:var(--radius);padding:10px 16px;
}
.iso-badges b{font-family:var(--ff-head);font-size:.95rem;letter-spacing:.6px;color:var(--primary)}
.iso-badges span{font-size:.78rem;color:var(--muted)}
.iso-band__cta{display:flex;gap:10px;flex-wrap:wrap}

.form-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.form-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
}
.form-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.form-card__ph{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--surface) 0 14px,var(--surface-2) 14px 28px);
  color:var(--accent);
}
.form-card__ph svg{width:44px;height:44px}
.form-card__body{padding:16px 18px}
.form-card__body h3{font-size:1rem;margin-bottom:6px}
.form-card__body p{font-size:.88rem;color:var(--muted);margin:0}

/* ------------------------------------------------ search results */
.search-hits{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.search-hit{
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:var(--radius);padding:12px 16px;
}
.search-hit a{font-family:var(--ff-head);font-size:1rem;color:var(--primary);text-decoration:none}
.search-hit a:hover{color:var(--accent)}
.search-hit p{margin:4px 0 0;font-size:.85rem;color:var(--muted);line-height:1.5}
.search-tag{
  display:inline-block;font-size:.66rem;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--accent);margin-bottom:3px;font-weight:600;
}

.check-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px 22px}
.check-list li{position:relative;padding-left:26px;color:var(--muted)}
.check-list li::before{
  content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;border-radius:3px;
  background:var(--accent);
  clip-path:polygon(14% 44%,0 62%,40% 100%,100% 16%,84% 3%,38% 66%);
}

/* ------------------------------------------------ tables */
.tbl-note{font-size:.85rem;color:var(--muted);margin-bottom:10px}
.tbl-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.data-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
.data-table caption{
  text-align:left;font-family:var(--ff-head);font-size:.86rem;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--primary);padding:12px 16px;border-bottom:1px solid var(--border);
}
.data-table th{
  background:var(--surface-2);text-align:left;font-family:var(--ff-head);font-weight:500;
  font-size:.76rem;letter-spacing:1px;text-transform:uppercase;color:var(--secondary);
  padding:10px 16px;border-bottom:1px solid var(--border);
}
.data-table td{padding:10px 16px;border-bottom:1px solid var(--border);vertical-align:top}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:#fafbfc}

/* -------- side-by-side composition / mechanical tables per grade */
.grade-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-bottom:20px}
.grade-pair__h{grid-column:1 / -1;margin:0 0 6px;font-size:1.02rem}
.grade-pair__col{min-width:0}
.grade-pair__col .data-table{min-width:280px}
.grade-pair__col--full{grid-column:1 / -1}
@media(max-width:820px){.grade-pair{grid-template-columns:1fr}.grade-pair .data-table{min-width:240px}}

/* ------------------------------------------------ related / calc cards */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.related-card{
  display:flex;flex-direction:column;gap:5px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:15px 17px;text-decoration:none;
}
.related-card:hover{border-color:var(--accent);text-decoration:none;box-shadow:var(--shadow)}
.related-card b{font-family:var(--ff-head);font-size:.98rem;letter-spacing:.5px;color:var(--primary)}
.related-card span{font-size:.82rem;color:var(--muted)}

.calc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.calc-cards--compact{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.calc-card{
  display:flex;flex-direction:column;gap:8px;background:var(--surface);
  border:1px solid var(--border);border-top:3px solid var(--primary);border-radius:var(--radius);
  padding:20px 20px 18px;text-decoration:none;box-shadow:var(--shadow);transition:all .2s var(--ease);
}
.calc-card:hover{transform:translateY(-3px);border-top-color:var(--accent);text-decoration:none;box-shadow:var(--shadow-lg)}
.calc-card b{font-family:var(--ff-head);font-size:1.05rem;letter-spacing:.6px;color:var(--primary)}
.calc-card span{font-size:.86rem;color:var(--muted)}
.calc-card .calc-go{margin-top:auto;font-family:var(--ff-head);font-size:.78rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent)}

/* ------------------------------------------------ FAQ */
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;
}
.faq-item summary{
  cursor:pointer;list-style:none;padding:15px 46px 15px 18px;position:relative;
  font-weight:600;font-size:.95rem;color:var(--primary);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-family:var(--ff-head);font-size:1.25rem;color:var(--accent);transition:transform .2s var(--ease);
}
.faq-item[open] summary::after{content:"–"}
.faq-body{padding:0 18px 16px}
.faq-body p{margin:0;font-size:.92rem;color:var(--muted)}

/* ------------------------------------------------ CTA band */
.cta-band{
  background:linear-gradient(120deg,var(--accent) 0%,var(--accent-2) 100%);
  border-radius:var(--radius-lg);color:#fff;padding:34px 36px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
}
.cta-band h2{color:#fff;margin-bottom:6px;border:0;padding:0}
.cta-band p{margin:0;color:#ffe3e9;max-width:60ch}
.cta-band .btn{flex-shrink:0}

/* ------------------------------------------------ footer */
.site-footer{background:var(--footer-bg);color:#b8c0ca;margin-top:60px}
.footer-grid{
  display:grid;grid-template-columns:1.4fr .8fr 1fr .9fr 1.1fr;gap:26px;padding:34px 0 26px;
}
.footer-logo{max-height:40px;width:auto;filter:brightness(0) invert(1) opacity(.92);margin-bottom:10px}
.footer-col p{font-size:.84rem;line-height:1.6}
.footer-col h3{
  color:#fff;font-size:.85rem;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:10px;
}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col ul li{margin-bottom:6px}
.footer-col ul a{color:#b8c0ca;font-size:.88rem}
.footer-col ul a:hover{color:#fff;text-decoration:none}
.footer-social{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.footer-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;color:#fff;
  border:1px solid #454c57;border-radius:8px;
}
.footer-social a:hover{border-color:var(--accent);text-decoration:none}
.footer-social svg{width:17px;height:17px}
.footer-addr{font-size:.84rem;line-height:1.5;margin-bottom:10px}
.footer-addr b{color:#e4e8ec;display:block;font-size:.74rem;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:3px}
.footer-contact{font-size:.88rem}
.footer-contact a{color:#fff}
/* extra bottom padding reserves the corner occupied by the fixed scroll-to-top button */
.footer-bottom{border-top:1px solid #333941;padding:16px 0 80px}
.footer-bottom__inner{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem}
.footer-bottom nav{display:flex;gap:18px}
.footer-bottom a{color:#9aa5b1}
.footer-bottom a:hover{color:#fff}
@media(max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ------------------------------------------------ forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.8rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--secondary)}
.field input,.field select,.field textarea{
  width:100%;background:var(--surface);color:var(--text);
  border:1.5px solid var(--border);border-radius:8px;padding:11px 13px;
  font-family:inherit;font-size:.95rem;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,16,46,.12);
}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--err)}
.error-msg{font-size:.8rem;color:var(--err);min-height:1em}
.req{color:var(--accent)}
.form-note{font-size:.8rem;color:var(--muted);margin:8px 0 0}
.form-alert{
  margin-top:12px;padding:12px 15px;border-radius:8px;font-size:.9rem;display:none;
}
.form-alert.show{display:block}
.form-alert.success{background:#e4f5eb;color:var(--ok);border:1px solid #bfe5cf}
.form-alert.error{background:#fdeceb;color:var(--err);border:1px solid #f3c4c0}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}

.captcha-box{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--surface-2);border:1.5px solid var(--border);border-radius:8px;padding:9px 12px;
}
.captcha-challenge{
  font-family:var(--ff-head);font-size:1.15rem;font-weight:600;letter-spacing:2px;
  color:var(--primary);white-space:nowrap;
}
.captcha-box input{
  flex:1;min-width:90px;background:var(--surface);border:1px solid var(--border);
  border-radius:7px;padding:9px 11px;font-size:1rem;width:auto;
}
.captcha-refresh{
  background:none;border:1px solid var(--border);border-radius:7px;color:var(--secondary);
  cursor:pointer;padding:8px;display:grid;place-items:center;
}
.captcha-refresh:hover{color:var(--accent);border-color:var(--accent)}
.captcha-refresh svg{width:15px;height:15px}

/* ------------------------------------------------ enquiry modal + FAB */
.enq-fab{
  position:fixed;right:22px;bottom:22px;z-index:1300;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--accent);color:#fff;border:0;border-radius:999px;
  padding:14px 22px;cursor:pointer;box-shadow:var(--shadow-lg);
  font-family:var(--ff-head);font-size:.9rem;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  transition:all .2s var(--ease);
}
.enq-fab:hover{background:var(--accent-2);transform:translateY(-2px)}
.enq-fab svg{width:17px;height:17px}
.enq-fab.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:none}

/* scroll-to-top — left edge; appears once the reader is a screenful down */
.to-top{
  position:fixed;left:22px;bottom:22px;z-index:1200;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--primary);color:#fff;border:0;cursor:pointer;
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;
  transition:opacity .22s var(--ease),visibility .22s var(--ease),background .2s var(--ease);
}
.to-top:hover{background:var(--accent)}
.to-top.is-visible{opacity:1;visibility:visible}
.to-top svg{width:18px;height:18px}

.enq-modal{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:20px}
.enq-modal[hidden]{display:none}
.enq-modal__backdrop{position:absolute;inset:0;background:rgba(18,24,32,.62);backdrop-filter:blur(2px)}
.enq-modal__panel{
  position:relative;background:var(--bg);border-radius:var(--radius-lg);
  width:min(720px,100%);max-height:calc(100vh - 40px);overflow:auto;
  padding:30px 32px 26px;box-shadow:var(--shadow-lg);
}
.enq-modal__close{
  position:absolute;top:14px;right:14px;background:var(--surface);border:1px solid var(--border);
  border-radius:8px;cursor:pointer;padding:8px;color:var(--primary);
}
.enq-modal__close:hover{color:var(--accent);border-color:var(--accent)}
.enq-modal__close svg{width:16px;height:16px;display:block}
.enq-modal__panel h2{margin-bottom:6px}
.enq-modal__lead{font-size:.92rem;color:var(--muted);margin-bottom:18px}
@media(max-width:640px){
  .enq-modal__panel{padding:22px 18px}
  .form-grid{grid-template-columns:1fr}
}

/* ------------------------------------------------ home hero */
.home-hero{
  position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(125deg,#232c38 0%,var(--primary) 45%,#3b4a5e 100%);
  padding:88px 0 72px;
}
.home-hero__grid{
  position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 100% at 30% 40%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 100% at 30% 40%,#000 30%,transparent 75%);
}
.home-hero::after{
  content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;border-radius:50%;
  border:54px solid rgba(200,16,46,.16);pointer-events:none;
}
.home-hero__inner{position:relative;z-index:1}
.home-hero h1{color:#fff;margin-bottom:14px}
.home-hero .accent{color:var(--accent-2)}
.home-hero .lead{color:#c6cfda;max-width:62ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-outline:hover{border-color:#fff;background:#fff;color:var(--accent)}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.12)}
.hero-facts{
  display:flex;gap:0;margin:0;flex-wrap:wrap;
  border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);overflow:hidden;
  background:rgba(255,255,255,.04);backdrop-filter:blur(3px);
}
.hero-facts > div{
  flex:1 1 140px;padding:16px 22px;text-align:center;
}
.hero-facts > div + div{border-left:1px solid rgba(255,255,255,.14)}
.hero-facts dt{
  font-family:var(--ff-head);font-size:1.8rem;font-weight:600;color:var(--accent-2);line-height:1;
  margin-bottom:5px;
}
.hero-facts dd{margin:0;font-size:.76rem;letter-spacing:1.4px;text-transform:uppercase;color:#aeb8c4}

/* ------------------------------------------------ material cards (home) */
.mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:16px}
.mat-card{
  display:flex;flex-direction:column;gap:6px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:18px 19px 15px;
  text-decoration:none;box-shadow:var(--shadow);transition:all .2s var(--ease);
}
.mat-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-lg);text-decoration:none}
.mat-card b{font-family:var(--ff-head);font-size:1.06rem;letter-spacing:.5px;color:var(--primary)}
.mat-card span{font-size:.84rem;color:var(--muted)}
.mat-card em{
  font-style:normal;font-family:var(--ff-head);font-size:.74rem;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--accent);margin-top:6px;
}

/* ------------------------------------------------ generic helpers */
.page-banner-note{font-size:.85rem;color:var(--muted)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:820px){.two-col{grid-template-columns:1fr}}
.info-box{
  background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:18px 20px;font-size:.92rem;color:var(--muted);
}
.info-box b{color:var(--primary)}
.muted{color:var(--muted)}
.center{text-align:center}

/* ------------------------------------------------ company page components */
/* numbered process steps (about, manufacturing, technical-info) */
ol.steps{list-style:none;margin:0;padding:0;counter-reset:steps}
ol.steps>li{
  position:relative;padding:0 0 22px 56px;counter-increment:steps;
}
ol.steps>li::before{
  content:counter(steps);position:absolute;left:0;top:-2px;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:#fff;
  font-family:var(--ff-head);font-size:1.05rem;
}
ol.steps>li:not(:last-child)::after{
  content:"";position:absolute;left:19px;top:42px;bottom:4px;width:2px;
  background:var(--border);
}
ol.steps>li b{display:block;font-size:1.02rem;color:var(--primary);margin-bottom:4px}
ol.steps>li p{margin:0 0 6px;font-size:.92rem;color:var(--muted)}

/* enquiry-to-dispatch flowchart (manufacturing) */
.process-flow{max-width:640px;margin:4px auto 6px}
.process-flow svg{display:block;width:100%;height:auto}

/* quick-facts pairs inside an info-box (about) */
dl.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;margin:12px 0 0}
dl.facts dt{font-family:var(--ff-head);font-size:1.7rem;color:var(--accent);line-height:1}
dl.facts dd{margin:2px 0 0;font-size:.78rem;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}

/* compact bullet list (industries cards, checklists inside boxes) */
.mini-list{margin:8px 0 0;padding-left:18px;list-style:none}
.mini-list li{position:relative;padding-left:0;font-size:.86rem;color:var(--muted);margin-bottom:5px}
.mini-list li::before{content:"—";position:absolute;left:-18px;color:var(--accent)}
a.mini-list, .mini-list a{color:inherit}

/* stacked contact details */
.contact-line{margin:10px 0 0;font-size:.9rem}
.contact-line span{display:block;margin-bottom:4px}
.contact-line a{color:var(--primary);text-decoration:none;border-bottom:1px solid var(--border)}
.contact-line a:hover{color:var(--accent);border-color:var(--accent)}
address{font-style:normal;line-height:1.7}

/* small lead above forms */
.form-lead{font-size:.88rem;color:var(--muted);margin:-6px 0 18px}
.form-lead .req{color:var(--accent)}

/* small muted note under tables / callouts (used site-wide) */
.table-note{font-size:.8rem;color:var(--muted);margin:10px 2px 0;line-height:1.55}

/* sitemap column list */
.sitemap-list{columns:2;column-gap:34px;margin-top:10px}
.sitemap-list li{break-inside:avoid;margin-bottom:6px;font-size:.92rem}
.sitemap-list a{color:var(--primary);text-decoration:none;border-bottom:1px solid var(--border)}
.sitemap-list a:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:700px){.sitemap-list{columns:1}}

/* inline link inside CTA band text */
.cta-band .cta-link{color:#fff;text-decoration:underline}

/* contact page split */
.contact-wrap{align-items:start}

/* ------------------------------------------------ calculators (shared UI) */
.calc-wrap{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);
}
.calc-form{margin:0}
.calc-form .field{margin-bottom:14px}
.calc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.calc-inputs .field{margin-bottom:0}
.calc-units{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.calc-units__label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-right:2px}
.calc-unit-btn{
  font:inherit;font-size:.82rem;line-height:1;padding:6px 14px;
  border:1px solid var(--border);border-radius:999px;
  background:var(--surface);color:var(--secondary);cursor:pointer;
}
.calc-unit-btn:hover{border-color:var(--accent);color:var(--accent)}
.calc-unit-btn.is-on{background:var(--primary);border-color:var(--primary);color:#fff}
@media(max-width:700px){.calc-inputs{grid-template-columns:1fr}}
.calc-results{margin-top:20px}
.calc-rows{margin:0;display:flex;flex-direction:column}
.calc-rows>div{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:10px 2px;border-bottom:1px dashed var(--border);
}
.calc-rows>div:last-child{border-bottom:0}
.calc-rows dt{font-size:.88rem;color:var(--muted)}
.calc-rows dd{
  margin:0;font-variant-numeric:tabular-nums;font-weight:600;
  font-size:1.05rem;color:var(--primary);text-align:right;
}
.calc-rows dd small{font-weight:500;color:var(--muted);font-size:.78rem;margin-left:2px}
.calc-rows>div.is-total{margin-top:4px;padding:12px 10px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border)}
.calc-rows>div.is-total dt{color:var(--primary);font-weight:600}
.calc-rows>div.is-total dd{color:var(--accent);font-size:1.25rem}
.calc-formula{
  margin:14px 0 0;font-size:.8rem;color:var(--muted);
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px 12px;
}
.calc-error{margin:14px 0 0;font-size:.9rem;color:var(--err);background:#fdeceb;border:1px solid #f3c4c0;border-radius:8px;padding:10px 14px}
.calc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.calc-msg{display:none;font-size:.85rem;margin:12px 0 0;color:var(--muted)}
.calc-msg.show{display:block}
.calc-msg.error{color:var(--err)}
.calc-note{font-size:.8rem;color:var(--muted);margin:14px 2px 0;line-height:1.55}
.calc-disclaimer{
  margin:12px 2px 0;font-size:.8rem;color:var(--muted);line-height:1.55;
  background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:10px 14px;
}
.calc-disclaimer b{color:var(--primary)}

/* email-PDF modal */
.calc-mail{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px}
.calc-mail[hidden]{display:none}
.calc-mail__backdrop{position:absolute;inset:0;background:rgba(15,20,28,.62)}
.calc-mail__panel{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);max-width:460px;width:100%;padding:26px 26px 22px;
  /* on short viewports the panel scrolls internally so the submit button
     is always reachable (100dvh corrects for mobile URL bars) */
  max-height:calc(100vh - 40px);overflow-y:auto;
  max-height:calc(100dvh - 40px);
}
.calc-mail__close{
  position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:8px;
  background:transparent;border:1px solid var(--border);color:var(--muted);
  font-size:1.2rem;cursor:pointer;
}
.calc-mail__close:hover{color:var(--accent);border-color:var(--accent)}
.calc-mail__lead{font-size:.86rem;color:var(--muted);margin:8px 0 18px}
.calc-mail .captcha-refresh{font-size:1.05rem}
@media(max-width:560px){
  .calc-wrap{padding:18px 16px}
  .calc-actions .btn{flex:1 1 100%}
}