/* ==========================================================================
   Smithco Industrial Supply Inc. — Redesign Design System
   Palette: graphite / steel blue / safety orange / cool neutrals
   ========================================================================== */

:root {
  --graphite-950: #12161c;
  --graphite-900: #1b2028;
  --graphite-800: #242b35;
  --graphite-700: #333d4a;
  --steel-700: #17405c;
  --steel-600: #1f4e73;
  --steel-500: #2b6690;
  --steel-100: #e5eef3;
  --orange-500: #e48300;
  --orange-600: #b66900; /* hover feedback only — all static orange lettering uses --orange-500 (logo orange) */
  --orange-100: #fff0db;
  --neutral-50: #f6f7f9;
  --neutral-100: #eef0f3;
  --neutral-200: #dde1e6;
  --neutral-400: #9aa3ad;
  --neutral-600: #5b6670;
  --neutral-800: #2a323b;
  --white: #ffffff;
  --success: #2f8f4e;
  --warn: #c99a10;
  --danger: #c1401f;

  --font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(18, 22, 28, 0.08);
  --shadow-md: 0 8px 24px rgba(18, 22, 28, 0.12);
  --shadow-lg: 0 20px 48px rgba(18, 22, 28, 0.18);
  --maxw: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--graphite-900);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--graphite-950);
  line-height: 1.08;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 2.6vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: 0.01em; }
p { margin: 0 0 1em; color: var(--neutral-800); }
a { color: inherit; }
img { max-width: 100%; display: block; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-500);
  font-weight: 700;
  margin-bottom: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--orange-500);
  display: inline-block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.92rem;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color .15s ease;
}
.btn-primary { background: var(--orange-500); color: var(--white); }
.btn-primary:hover { background: var(--orange-600); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,0.5); color: var(--white); }
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.btn-dark { background: var(--graphite-950); color: var(--white); }
.btn-dark:hover { background: var(--steel-700); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Header / Nav ---------- */
.topbar {
  background: var(--graphite-950);
  color: var(--neutral-200);
  font-size: 0.82rem;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.topbar a { color: var(--neutral-200); text-decoration: none; }
.topbar .topbar-links { display: flex; gap: 20px; }
.topbar .topbar-links span { color: var(--orange-500); font-weight: 600; }

header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--neutral-200);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.logo {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--graphite-950);
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.logo span { color: var(--orange-500); }
.logo small {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--neutral-600);
  margin-left: 8px;
  text-transform: uppercase;
}

nav.main-nav { display: flex; align-items: center; gap: 32px; }
nav.main-nav a {
  text-decoration: none;
  color: var(--graphite-800);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}
nav.main-nav a:hover, nav.main-nav a.active { color: var(--steel-600); border-bottom-color: var(--orange-500); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; }

@media (max-width: 900px) {
  nav.main-nav { position: fixed; inset: 76px 0 0 0; background: var(--white); flex-direction: column; align-items: flex-start; padding: 24px; gap: 4px; transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; }
  nav.main-nav.open { transform: translateX(0); }
  nav.main-nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--neutral-100); }
  .nav-toggle { display: block; }
  .nav-cta .btn span.hide-mobile { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(120deg, var(--graphite-950) 0%, var(--steel-700) 78%);
  color: var(--white);
  overflow: hidden;
}
.hero .container { padding-top: 84px; padding-bottom: 84px; position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.hero p.lead { color: var(--neutral-200); font-size: 1.15rem; max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-diagram { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-lg); padding: 20px; }

.blueprint-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  z-index: 1;
}

.stat-strip {
  background: var(--graphite-900);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.stat-strip .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 26px 24px; }
.stat { text-align: left; color: var(--white); }
.stat .num { font-family: var(--font-head); font-size: 2.1rem; font-weight: 700; color: var(--orange-500); display: block; }
.stat .label { font-size: 0.82rem; color: var(--neutral-400); text-transform: uppercase; letter-spacing: 0.06em; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .stat-strip .container { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Sections ---------- */
section { padding: 84px 0; }
section.tight { padding: 56px 0; }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.bg-neutral { background: var(--neutral-50); }
.bg-dark { background: var(--graphite-950); color: var(--white); }
.bg-dark h2, .bg-dark h3 { color: var(--white); }
.bg-dark p { color: var(--neutral-200); }
.bg-steel { background: var(--steel-700); color: var(--white); }
.bg-steel h2, .bg-steel h3 { color: var(--white); }
.bg-steel p { color: var(--steel-100); }

/* ---------- Capability / service cards ---------- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-4, .grid-5, .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Forged: reference drawing / QC sketch panels ---------- */
.tech-sketch { background: var(--neutral-50); border: 1px solid var(--neutral-200); border-radius: var(--radius-md); padding: 18px; overflow-x: auto; }
.tech-sketch svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.qc-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; }
.qc-legend li { display: flex; gap: 8px; font-size: 0.86rem; align-items: flex-start; }
.qc-legend .num { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--orange-500); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 0.72rem; display: flex; align-items: center; justify-content: center; }
@media (max-width: 620px) { .qc-legend { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  height: 100%;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--steel-500); }
.card .icon {
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--steel-100); color: var(--steel-700);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; font-size: 1.4rem;
}
.card a.card-link { font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--steel-600); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }
.card a.card-link:hover { color: var(--orange-600); }

.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--orange-100);
  color: var(--orange-500);
  margin-bottom: 10px;
}

/* ---------- Anchor detail rows (capabilities page) ---------- */
.capability-row { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; padding: 56px 0; border-bottom: 1px solid var(--neutral-200); scroll-margin-top: 90px; }
.capability-row:last-child { border-bottom: none; }
.capability-row .index { font-family: var(--font-head); font-size: 1rem; color: var(--orange-500); font-weight: 700; }
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li { padding: 10px 0; border-bottom: 1px dashed var(--neutral-200); display: flex; gap: 10px; font-size: 0.96rem; }
.spec-list li::before { content: "▸"; color: var(--orange-500); font-weight: 700; }
@media (max-width: 900px) { .capability-row { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Logos / certifications strip ---------- */
.cert-strip { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cert-chip { display: flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-sm); padding: 10px 16px; font-weight: 700; font-family: var(--font-head); letter-spacing: 0.03em; color: var(--steel-700); }
.cert-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }

/* ---------- AI tool callout on home ---------- */
.ai-callout { background: var(--graphite-950); border-radius: var(--radius-lg); padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; color: var(--white); position: relative; overflow: hidden; }
.ai-callout::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(228,131,0,0.35), transparent 70%); }
.ai-callout h2 { color: var(--white); }
@media (max-width: 900px) { .ai-callout { grid-template-columns: 1fr; padding: 32px; } }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--graphite-950); color: var(--neutral-400); padding: 64px 0 28px; }
footer.site-footer h4 { color: var(--white); font-size: 0.95rem; }
footer .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }
footer a { color: var(--neutral-400); text-decoration: none; display: block; margin-bottom: 10px; font-size: 0.92rem; }
footer a:hover { color: var(--orange-500); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 0.82rem; flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px) { footer .footer-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 6px; color: var(--graphite-800); }
input, select, textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--neutral-200); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.95rem; background: var(--white); color: var(--graphite-900);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--steel-500); }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Breadcrumb / page header ---------- */
.page-header { background: var(--graphite-950); color: var(--white); padding: 56px 0; }
.page-header .eyebrow { color: var(--orange-500); }
.breadcrumb { font-size: 0.82rem; color: var(--neutral-400); margin-bottom: 14px; }
.breadcrumb a { color: var(--neutral-400); text-decoration: none; }
.breadcrumb a:hover { color: var(--orange-500); }

/* ---------- Utility ---------- */
.flex { display: flex; }
.gap-12 { gap: 12px; }
.center { text-align: center; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.muted { color: var(--neutral-600); }
.w-100 { width: 100%; }

/* ==========================================================================
   ADDITIONS — Smithco Forged components, cinematic intro, misc utilities
   Appended to the client-supplied design system. Same tokens, no overrides.
   ========================================================================== */

.hidden { display: none !important; }
.mono { font-family: var(--font-mono); }
.text-orange { color: var(--orange-500); }
.mb-0 { margin-bottom: 0; }
.lead-lg { font-size: 1.1rem; }
.divider { height: 1px; background: var(--neutral-200); margin: 32px 0; border: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--neutral-200);
  font-size: 0.88rem; font-weight: 600; color: var(--graphite-800);
}
.bg-dark .chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: var(--neutral-200); }
.chip.on, .chip:hover { border-color: var(--orange-500); color: var(--orange-600); }
.anchor-chips a { text-decoration: none; }
.callout {
  border-left: 4px solid var(--orange-500); background: var(--neutral-50);
  padding: 18px 22px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 22px 0;
}
.callout p:last-child { margin-bottom: 0; }
.note-sm { font-size: 0.85rem; color: var(--neutral-600); }

/* ---------- Skip link (a11y) ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--orange-500); color: #fff; padding: 12px 20px;
  font-family: var(--font-head); font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Cinematic intro (homepage entrance) ---------- */
.intro-wrap { height: 190vh; position: relative; }
.intro-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--graphite-950); display: grid; place-items: center;
}
.intro-fallback {
  position: absolute; inset: -6%;
  background:
    radial-gradient(760px 480px at 78% 22%, rgba(228,131,0,0.30), transparent 62%),
    radial-gradient(860px 600px at 15% 84%, rgba(31,78,115,0.55), transparent 64%),
    linear-gradient(150deg, var(--graphite-950), #16283b 62%, var(--graphite-950));
  animation: introPan 24s ease-in-out infinite alternate;
}
@keyframes introPan { from { transform: scale(1) translate(0,0); } to { transform: scale(1.1) translate(-2%, 2%); } }
.intro-stage video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s ease; filter: brightness(.46) saturate(.85);
  will-change: transform;
}
.intro-stage video.ready { opacity: 1; }
.intro-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 92% 72% at 50% 46%, rgba(18,22,28,0.15), rgba(18,22,28,0.74)),
    linear-gradient(rgba(18,22,28,0.34), rgba(18,22,28,0.18) 44%, rgba(18,22,28,0.72) 96%);
}
.intro-grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.intro-content { position: relative; z-index: 3; text-align: center; padding: 0 6vw; will-change: transform, opacity; }
.intro-logo {
  font-family: var(--font-head); font-weight: 800; color: var(--white);
  font-size: clamp(3.6rem, 12vw, 9rem); line-height: 1; letter-spacing: 0.01em; margin: 0;
  opacity: 0; animation: introRise 1s .3s cubic-bezier(.2,.7,.3,1) forwards;
}
.intro-logo span { color: var(--orange-500); }
.intro-sub {
  font-family: var(--font-head); font-weight: 600; color: #b9c8d6;
  font-size: clamp(0.75rem, 1.6vw, 1.05rem); letter-spacing: 0.5em; text-indent: 0.5em;
  text-transform: uppercase; margin-top: 10px;
  opacity: 0; animation: introRise 1s .5s cubic-bezier(.2,.7,.3,1) forwards;
}
.intro-rule {
  width: 64px; height: 3px; background: var(--orange-500); margin: 26px auto 0;
  opacity: 0; animation: introRise 1s .65s cubic-bezier(.2,.7,.3,1) forwards;
}
.intro-motto {
  color: #dde5ec; font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 500;
  max-width: 48ch; margin: 20px auto 0; line-height: 1.5;
  opacity: 0; animation: introRise 1s .8s cubic-bezier(.2,.7,.3,1) forwards;
}
.intro-motto strong { color: var(--orange-500); font-weight: 600; }
@keyframes introRise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
.intro-scroll {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 28px; z-index: 3;
  color: rgba(255,255,255,0.72); font-family: var(--font-head); font-size: 0.75rem;
  letter-spacing: 0.26em; text-transform: uppercase; display: grid; justify-items: center; gap: 10px;
}
.intro-scroll::after {
  content: ""; width: 2px; height: 42px;
  background: linear-gradient(rgba(255,255,255,0.85), transparent);
  animation: introDrop 1.8s ease-in-out infinite;
}
@keyframes introDrop { 0% { transform: translateY(-8px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
.intro-note {
  position: absolute; left: 4vw; bottom: 4vh; z-index: 3;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.42);
}
.intro-skip {
  position: absolute; right: 4vw; top: 4vh; z-index: 4;
  font-family: var(--font-head); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.75); text-decoration: none; border: 1px solid rgba(255,255,255,0.3);
  padding: 8px 16px; border-radius: var(--radius-sm); transition: .18s;
}
.intro-skip:hover { background: rgba(255,255,255,0.14); color: #fff; }
/* header hidden during the intro, revealed as the site arrives */
header.site-header.intro-hidden { opacity: 0; pointer-events: none; transform: translateY(-10px); }
header.site-header { transition: opacity .4s ease, transform .4s ease; }
@media (prefers-reduced-motion: reduce) {
  .intro-wrap { height: auto; }
  .intro-stage { position: relative; height: 88vh; }
  .intro-fallback, .intro-logo, .intro-sub, .intro-rule, .intro-motto { animation: none; opacity: 1; }
  .intro-scroll::after { animation: none; }
}

/* ---------- Smithco Forged: upload zone ---------- */
.forged-shell { max-width: 960px; margin: 0 auto; }
.upload-zone {
  border: 2px dashed var(--neutral-200); border-radius: var(--radius-lg);
  background: var(--white); padding: 48px 32px; text-align: center;
  transition: border-color .18s ease, background .18s ease;
}
.upload-zone.drag { border-color: var(--orange-500); background: var(--orange-100); }
.upload-zone .up-icon { font-size: 2.4rem; margin-bottom: 10px; }
.upload-zone h3 { margin-bottom: 6px; }
.upload-zone input[type="file"] { display: none; }
.upload-formats { font-size: 0.82rem; color: var(--neutral-600); margin-top: 6px; }
.file-chip {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  background: var(--steel-100); border: 1px solid var(--steel-500);
  color: var(--steel-700); border-radius: var(--radius-sm);
  padding: 9px 14px; font-size: 0.9rem; font-weight: 600;
}
.file-chip button {
  background: none; border: none; cursor: pointer; color: var(--steel-700);
  font-size: 1rem; line-height: 1; padding: 0 2px;
}
.file-chip button:hover { color: var(--danger); }
.demo-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--warn); color: #2a2000; font-family: var(--font-head);
  font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}

/* ---------- Forged: processing animation ---------- */
.progress-wrap { background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); padding: 32px; }
.progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.progress-head .label { font-family: var(--font-head); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--graphite-900); }
.progress-head .pct { font-family: var(--font-mono); font-size: 1.1rem; color: var(--orange-500); font-weight: 600; }
.progress-track { height: 8px; background: var(--neutral-100); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--steel-600), var(--orange-500)); border-radius: 999px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.steps li {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border: 1px solid var(--neutral-200); border-radius: var(--radius-sm);
  font-size: 0.92rem; color: var(--neutral-600); background: var(--white); transition: .2s;
}
.steps li .dot {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--neutral-200); display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: transparent; transition: .2s;
}
.steps li.active { border-color: var(--steel-500); color: var(--graphite-900); background: var(--steel-100); }
.steps li.active .dot { border-color: var(--steel-600); border-top-color: transparent; animation: spin .8s linear infinite; }
.steps li.done { border-color: var(--success); color: var(--graphite-900); }
.steps li.done .dot { background: var(--success); border-color: var(--success); color: #fff; }
.steps li.done .dot::after { content: "✓"; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Forged: results ---------- */
.result-block { background: var(--white); border: 1px solid var(--neutral-200); border-radius: var(--radius-lg); padding: 30px; margin-bottom: 24px; }
.result-block > h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.result-block .sub { color: var(--neutral-600); font-size: 0.9rem; margin-bottom: 20px; }
.drawing-header { border: 2px solid var(--graphite-900); border-radius: var(--radius-sm); overflow: hidden; font-family: var(--font-mono); }
.drawing-header .dh-top { background: var(--graphite-900); color: var(--white); padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.drawing-header .dh-top .brand { font-family: var(--font-head); font-weight: 800; letter-spacing: 0.04em; font-size: 1.05rem; }
.drawing-header .dh-top .brand span { color: var(--orange-500); }
.drawing-header .dh-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.drawing-header .dh-cell { padding: 12px 18px; border-right: 1px solid var(--neutral-200); border-top: 1px solid var(--neutral-200); }
.drawing-header .dh-cell:last-child { border-right: none; }
.drawing-header .dh-cell .k { font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neutral-600); display: block; margin-bottom: 3px; }
.drawing-header .dh-cell .v { font-size: 0.95rem; font-weight: 600; color: var(--graphite-950); }
@media (max-width: 760px) { .drawing-header .dh-grid { grid-template-columns: repeat(2, 1fr); } }

.bom-table-wrap { overflow-x: auto; border: 1px solid var(--neutral-200); border-radius: var(--radius-sm); }
table.bom { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 780px; }
table.bom thead th {
  background: var(--graphite-900); color: var(--white); text-align: left;
  font-family: var(--font-head); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  font-size: 0.76rem; padding: 12px 14px; white-space: nowrap;
}
table.bom tbody td { padding: 11px 14px; border-bottom: 1px solid var(--neutral-100); vertical-align: top; }
table.bom tbody tr:nth-child(even) { background: var(--neutral-50); }
table.bom tbody td:first-child,
table.bom tbody td:nth-child(3),
table.bom tbody td:nth-child(6),
table.bom tbody td:nth-child(7),
table.bom tbody td:nth-child(8) { font-family: var(--font-mono); white-space: nowrap; }
table.bom tbody td:nth-child(7), table.bom tbody td:nth-child(8) { text-align: right; }
table.bom thead th:nth-child(7), table.bom thead th:nth-child(8) { text-align: right; }
table.bom tfoot td { padding: 14px; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--neutral-100); border-top: 2px solid var(--graphite-900); }
table.bom tfoot td.total { font-family: var(--font-mono); font-size: 1.1rem; color: var(--orange-500); text-align: right; }

.qc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qc-list li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border: 1px solid var(--neutral-200); border-radius: var(--radius-sm); transition: .16s; }
.qc-list li.checked { background: #f2faf5; border-color: var(--success); }
.qc-list li input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--success); flex-shrink: 0; cursor: pointer; }
.qc-list .qc-body { display: flex; flex-direction: column; gap: 3px; cursor: pointer; font-weight: 400; margin: 0; }
.qc-list .qc-body strong { font-size: 0.94rem; color: var(--graphite-900); font-weight: 500; }
.qc-list li.checked .qc-body strong { text-decoration: line-through; color: var(--neutral-600); }
.qc-list .qc-body span { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel-600); }
.qc-progress-pill { font-family: var(--font-mono); font-size: 0.85rem; background: var(--neutral-100); border-radius: 999px; padding: 5px 14px; color: var(--graphite-800); }

.export-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.arch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.arch-step { background: var(--white); border: 1px solid var(--neutral-200); border-left: 3px solid var(--steel-600); border-radius: var(--radius-sm); padding: 22px; }
.arch-step .n { font-family: var(--font-mono); font-size: 0.78rem; color: var(--orange-500); font-weight: 600; }
.arch-step h4 { margin: 6px 0 8px; font-size: 1.05rem; }
.arch-step p { font-size: 0.9rem; margin: 0; color: var(--neutral-600); }
@media (max-width: 820px) { .arch-grid { grid-template-columns: 1fr; } }

@media print {
  .site-header, .topbar, .site-footer, .upload-zone, .export-row, .progress-wrap, .no-print { display: none !important; }
  .result-block { border: 1px solid #999; break-inside: avoid; page-break-inside: avoid; }
  body { background: #fff; }
}

/* ---------- Topbar responsive fix ----------
   The base .topbar locks a 36px row with two flex children; on tablet and
   phone widths the location sentence wraps and pushes the phone/email out of
   the bar. Keep the contact links (the actionable half) and drop the sentence. */
.topbar .topbar-links a { white-space: nowrap; }
.topbar .container > div:first-child { min-width: 0; }
@media (max-width: 900px) {
  .topbar .container > div:first-child { display: none; }
  .topbar .container { justify-content: center; }
  .topbar .topbar-links { gap: 18px; }
}
@media (max-width: 420px) {
  .topbar { font-size: 0.76rem; }
  .topbar .topbar-links { gap: 12px; }
}

/* Long nav labels shouldn't wrap mid-word in the desktop bar */
nav.main-nav a { white-space: nowrap; }

/* ---------- Heading colour on dark surfaces ----------
   The base sheet pins every heading to --graphite-950 and only lifts h2/h3 back
   to white inside .bg-dark / .bg-steel. Any h1 or h4 on a dark surface — including
   the hero headline and every page header — therefore rendered near-black on
   near-black. Cover the remaining combinations. */
.hero h1, .hero h2, .hero h3, .hero h4,
.page-header h1, .page-header h2, .page-header h3, .page-header h4,
.bg-dark h1, .bg-dark h4,
.bg-steel h1, .bg-steel h4,
.ai-callout h1, .ai-callout h3, .ai-callout h4,
.stat-strip h1, .stat-strip h2, .stat-strip h3 { color: var(--white); }

/* Body copy on dark surfaces that isn't already covered by .lead */
.hero p, .page-header p { color: var(--neutral-200); }
.hero .eyebrow, .page-header .eyebrow { color: var(--orange-500); }

/* ---------- Prevent sideways scroll from the off-canvas mobile nav ----------
   nav.main-nav parks itself at translateX(100%) on small screens, which extends
   the document a full viewport to the right and lets every page pan sideways.
   Use overflow-x: clip where supported — unlike hidden it does not create a
   scroll container, so the sticky header keeps working. */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

/* ---------- Header row at phone widths ----------
   The logo's descriptor wraps to two lines next to a full-size CTA, squeezing
   the row. Drop the descriptor and tighten the button below 520px. */
@media (max-width: 520px) {
  .logo small { display: none; }
  .logo { font-size: 1.45rem; }
  .nav-cta { gap: 10px; }
  .nav-cta .btn { padding: 11px 15px; font-size: 0.8rem; }
  .nav-row { height: 66px; }
  nav.main-nav { inset: 66px 0 0 0; }
}

/* ---------- Client logo band ----------
   Dark graphite strip that carries the customer logos. Source artwork arrives
   in mixed colors and treatments; the filter renders every mark in a single
   white pass so the band reads as one system on the graphite panel. */
.logo-band {
  background: var(--graphite-950);
  border: 1px solid var(--graphite-800);
  border-radius: 10px;
  padding: 32px 38px;
}
.logo-band .eyebrow { color: var(--white); }
.logo-band-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px 52px;
}
.logo-band .eyebrow + .logo-band-row { margin-top: 22px; }
.logo-band-row img {
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.82;
  transition: opacity 0.2s ease;
}
.logo-band-row img:hover { opacity: 1; }
/* Forced-colors (Windows High Contrast) strips the panel's background but
   keeps the white filter, which would erase the logos on light themes. Keep
   the authored graphite + white treatment intact for this band only. */
@media (forced-colors: active) {
  .logo-band { forced-color-adjust: none; }
}
/* Repcon's mark draws its letters with a gray panel fill; the white filter
   would flatten it to a blank shape. Their file is already a reversed
   (for-dark) logo, so it renders natively. */
.logo-band-row .lg-repcon { filter: none; }
.logo-band-row .lg-performance { height: 54px; }
.logo-band-row .lg-brownroot { height: 30px; }
.logo-band-row .lg-tesla { height: 19px; }
.logo-band-row .lg-worley { height: 33px; }
.logo-band-row .lg-kbr { height: 32px; }
.logo-band-row .lg-repcon { height: 42px; }
@media (max-width: 640px) {
  .logo-band { padding: 24px 22px; }
  .logo-band-row { gap: 20px 34px; }
  .logo-band-row .lg-performance { height: 44px; }
  .logo-band-row .lg-brownroot { height: 24px; }
  .logo-band-row .lg-tesla { height: 15px; }
  .logo-band-row .lg-worley { height: 26px; }
  .logo-band-row .lg-kbr { height: 25px; }
  .logo-band-row .lg-repcon { height: 34px; }
}

/* ---------- Page-header background images ----------
   Each interior page carries a photographic backdrop tied to its subject,
   burned into the graphite with a left-weighted overlay so the white heading
   and breadcrumb keep full contrast. */
.page-header.ph-img {
  background-size: cover;
  background-position: center;
  padding: 68px 0;
}
.page-header.ph-capabilities {
  background-image: linear-gradient(100deg, rgba(18,22,28,0.96) 0%, rgba(18,22,28,0.86) 50%, rgba(18,22,28,0.5) 100%), url("img/header-capabilities.jpg");
}
.page-header.ph-forged {
  background-image: linear-gradient(100deg, rgba(18,22,28,0.96) 0%, rgba(18,22,28,0.87) 50%, rgba(18,22,28,0.60) 100%), url("img/header-forged.jpg");
}
.page-header.ph-about {
  background-image: linear-gradient(100deg, rgba(18,22,28,0.96) 0%, rgba(18,22,28,0.86) 50%, rgba(18,22,28,0.45) 100%), url("img/header-about.jpg");
}
.page-header.ph-contact {
  background-image: linear-gradient(100deg, rgba(18,22,28,0.96) 0%, rgba(18,22,28,0.88) 50%, rgba(18,22,28,0.64) 100%), url("img/header-contact.jpg");
}

/* ---------- Contact sidebar cards ----------
   The base .card { height: 100% } exists so cards in a grid row share a
   height. In the contact page's two-column layout the sidebar column is
   stretched to match the tall form, and 100% made the stacked cards inherit
   that stretch — hundreds of pixels of empty card below the content. Stacked
   cards inside a grid-2 column size to their content instead. */
.grid-2 > div > .card { height: auto; }

/* Phones pull the 900px header variants instead of the 1920px originals. */
@media (max-width: 640px) {
  .page-header.ph-capabilities {
    background-image: linear-gradient(100deg, rgba(18,22,28,0.96) 0%, rgba(18,22,28,0.86) 50%, rgba(18,22,28,0.5) 100%), url("img/header-capabilities-m.jpg");
  }
  .page-header.ph-forged {
    background-image: linear-gradient(100deg, rgba(18,22,28,0.96) 0%, rgba(18,22,28,0.87) 50%, rgba(18,22,28,0.60) 100%), url("img/header-forged-m.jpg");
  }
  .page-header.ph-about {
    background-image: linear-gradient(100deg, rgba(18,22,28,0.96) 0%, rgba(18,22,28,0.86) 50%, rgba(18,22,28,0.45) 100%), url("img/header-about-m.jpg");
  }
  .page-header.ph-contact {
    background-image: linear-gradient(100deg, rgba(18,22,28,0.96) 0%, rgba(18,22,28,0.88) 50%, rgba(18,22,28,0.64) 100%), url("img/header-contact-m.jpg");
  }
}

/* ---------- About: process steps on the dark band ---------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.process-step {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  padding: 24px 22px;
}
.process-step .step-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--orange-500);
  display: block;
  margin-bottom: 12px;
}
.process-step h3 { font-size: 1.12rem; color: var(--white); }
.process-step p { font-size: 0.92rem; color: var(--neutral-200); margin: 0; }
@media (max-width: 960px) { .process-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }

/* ---------- Forged: workflow flow strip ---------- */
.forged-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
.forged-flow .ff-node {
  border: 1.5px solid var(--steel-600);
  color: var(--steel-700);
  border-radius: 5px;
  padding: 8px 12px;
  background: var(--white);
}
.forged-flow .ff-hub {
  background: var(--graphite-950);
  border-color: var(--graphite-950);
  color: var(--white);
}
.forged-flow .ff-end {
  background: var(--orange-500);
  border-color: var(--orange-500);
  color: var(--white);
  font-weight: 600;
}
.forged-flow .ff-arrow { color: var(--orange-500); font-weight: 700; }

/* ---------- Official logo in the header ----------
   The approved SMITHCO wordmark replaces the typeset logo. Dimensions are
   intrinsic (565x96); CSS scales it to the nav row. */
.logo img { height: 42px; width: auto; display: block; }
@media (max-width: 520px) {
  .logo img { height: 33px; }
}

/* ---------- Intro: official logo artwork replaces the typeset brand ----------
   Same entrance animation as the old typeset logo; the drop shadow is a
   display treatment to lift the mark off the video, not an alteration of it. */
.intro-logo-img {
  display: block;
  width: min(620px, 78vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 3px 22px rgba(0, 0, 0, 0.55));
  opacity: 0;
  animation: introRise 1s .3s cubic-bezier(.2,.7,.3,1) forwards;
}

/* ---------- Customer logo marquee ----------
   Full-width dark band with a slow, seamless horizontal scroll. The track
   holds the logo sequence twice; translateX(-50%) loops one full sequence.
   Logos render white via filter for a standardized treatment; edge masks fade
   marks in and out. Reduced-motion gets a static wrapped grid. */
.logo-marquee-section { background: var(--graphite-950); padding: 56px 0 48px; overflow: hidden; }
.logo-marquee-head { text-align: center; margin: 0 auto 36px; padding: 0 24px; max-width: 900px; }
.logo-marquee-head .eyebrow { color: var(--orange-500); }
.logo-marquee-head h2 { color: var(--white); margin: 0; }
.logo-marquee { overflow: hidden; position: relative; }
/* Edge fades as static overlays: masking a continuously-animating track
   forces repaints; gradient overlays on the solid band look identical and
   cost nothing while the track moves underneath. */
.logo-marquee::before,
.logo-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9%;
  z-index: 1;
  pointer-events: none;
}
.logo-marquee::before { left: 0; background: linear-gradient(90deg, var(--graphite-950), rgba(18, 22, 28, 0)); }
.logo-marquee::after { right: 0; background: linear-gradient(270deg, var(--graphite-950), rgba(18, 22, 28, 0)); }
.logo-marquee.offscreen .logo-marquee-track { animation-play-state: paused; }
.logo-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 88px;
  padding-right: 88px; /* trailing gap = item gap so the -50% loop is seamless */
  animation: logoMarquee 70s linear infinite;
  will-change: transform;
}
.logo-marquee-track img {
  width: auto;
  flex: none;
  filter: brightness(0) invert(1);
  opacity: 0.78;
}
@keyframes logoMarquee { to { transform: translateX(-50%); } }
.logo-marquee-note { text-align: center; color: var(--neutral-400); margin: 30px auto 0; padding: 0 24px; max-width: 760px; }
@media (max-width: 640px) {
  .logo-marquee-track { gap: 54px; padding-right: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 26px 44px; padding-right: 0; }
  .logo-marquee::before, .logo-marquee::after { display: none; }
  /* the duplicate sequence exists only to make the animated loop seamless */
  .logo-marquee-track img[aria-hidden="true"] { display: none; }
}
@media (forced-colors: active) {
  .logo-marquee-section { forced-color-adjust: none; }
}

/* Per-logo marquee heights (2x-safe source art; tune here when swapping logos).
   PC Construction paints its letters on an opaque panel, so the white filter
   would flatten it — it gets a grayscale treatment instead of the invert. */
.logo-marquee-track .mq-tesla { height: 20px; }
.logo-marquee-track .mq-worley { height: 34px; }
.logo-marquee-track .mq-performance { height: 52px; }
.logo-marquee-track .mq-ventureglobal { height: 22px; }
.logo-marquee-track .mq-samsungct { height: 26px; }
.logo-marquee-track .mq-primoris { height: 44px; }
.logo-marquee-track .mq-airliquide { height: 30px; }
.logo-marquee-track .mq-cajun { height: 36px; }
.logo-marquee-track .mq-pcconstruction { height: 48px; filter: grayscale(1) brightness(1.75); }
.logo-marquee-track .mq-audubon { height: 40px; }
.logo-marquee-track .mq-starcon { height: 30px; }
.logo-marquee-track .mq-berggroup { height: 48px; }
@media (max-width: 640px) {
  .logo-marquee-track img { transform: scale(0.82); }
}

/* ---------- Mechanical Materials & PVF: expandable product categories ---------- */
.pvf-cats details {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.pvf-cats summary {
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--graphite-950);
  padding: 13px 18px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pvf-cats summary::-webkit-details-marker { display: none; }
.pvf-cats summary::after { content: "+"; color: var(--orange-500); font-weight: 700; font-size: 1.2rem; line-height: 1; }
.pvf-cats details[open] summary::after { content: "\2212"; }
.pvf-cats details[open] summary { border-bottom: 1px solid var(--neutral-100); }
.pvf-cats .pvf-body { padding: 14px 18px 6px; }

/* ---------- Unified capability panels ----------
   Plain Includes lists share the exact box shape of the expandable category
   panels, so every capability's right column reads as one component: boxed
   white panel, same type treatment — "+" marks expandable rows, the sideways
   triangle marks plain list rows. */
.includes-panel {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  padding: 4px 18px;
}
.includes-panel .spec-list li:last-child { border-bottom: none; }

/* ---------- Forged Intake (live) ---------- */
.live-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--success); color: #ffffff; font-family: var(--font-head);
  font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ffffff; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.intake-error {
  display: block; background: #fdf1f1; border: 1px solid var(--danger); color: #8a1f1f;
  border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 14px; font-size: 0.92rem;
}
.flag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.flag-list li {
  padding: 11px 16px; border: 1px solid var(--neutral-200); border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm); font-size: 0.93rem; background: var(--neutral-50);
}
table.bom.req { min-width: 680px; }
table.bom.req tbody td,
table.bom.req thead th { text-align: left; }
table.bom.req tbody td:nth-child(6),
table.bom.req tbody td:nth-child(7) { font-family: var(--font-body); white-space: normal; }
table.bom.req tbody td:nth-child(3) { white-space: nowrap; }