/* ============================================================
   FLOW ENGINEERING — Design System
   Industrial / engineering-drawing identity.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&family=Archivo+Expanded:wght@700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Color */
  --bg:        #ECEEE8;   /* paper / steel-white */
  --bg-alt:    #E1E4DB;
  --panel:     #14181A;   /* graphite / near-black */
  --panel-2:   #0C0F10;
  --ink:       #171B1B;
  --ink-soft:  #4B5350;
  --line:      #C4C9BE;
  --line-dark: #2C3230;
  --steel:     #40616B;
  --accent:    #E1590C;   /* safety orange */
  --accent-2:  #EFA400;   /* amber / caution */
  --flow-red:      #E7161D;   /* logo red — primary buttons */
  --flow-red-deep: #A10F16;
  --white:     #F7F8F4;

  /* Type */
  --f-display: 'Archivo Expanded', 'Archivo', sans-serif;
  --f-body:    'Inter', sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;

  --radius: 2px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:800; margin:0; letter-spacing:-0.01em; }
p{ margin:0 0 1em; color:var(--ink-soft); }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* ---------- eyebrow / spec-code labels ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--accent);
}
.eyebrow.on-dark{ color:var(--accent-2); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  min-height:76px; max-width:1440px; gap:20px; flex-wrap:nowrap;
}
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand-logo{ height:44px; width:auto; display:block; }
nav.primary-nav{ display:flex; gap:22px; align-items:center; flex-wrap:nowrap; }
nav.primary-nav a{
  font-size:12.5px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink-soft); position:relative; padding:6px 0; white-space:nowrap;
}
nav.primary-nav a:hover, nav.primary-nav a.active{ color:var(--ink); }
nav.primary-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent);
}
.btn.header-cta{ flex-shrink:0; white-space:nowrap; padding:14px 22px; border-radius:5px; box-shadow:0 8px 20px rgba(231,22,29,.28); }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; border:1px solid var(--line); background:none;
  border-radius:var(--radius); cursor:pointer; flex-shrink:0; padding:0;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--ink); margin:0 auto; }
.mobile-nav{ display:none; }
.site-header.nav-open .mobile-nav{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:8px 32px 24px; border-top:1px solid var(--line);
}
.mobile-nav a{
  width:100%; padding:12px 0; font-size:13px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--line);
}
.mobile-nav a.active{ color:var(--accent); }

/* ---------- staff corner login + edit-request modal ---------- */
.staff-corner-btn{
  flex-shrink:0; white-space:nowrap; background:none; cursor:pointer;
  border:1px solid var(--line-dark); border-radius:var(--radius);
  color:var(--ink-soft); font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; padding:8px 12px;
}
.staff-corner-btn:hover{ border-color:var(--ink); color:var(--ink); }
.staff-corner-btn.is-authed{ border-color:var(--accent); color:var(--accent); }
.fe-modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(12,15,16,.55);
  z-index:200; align-items:center; justify-content:center; padding:20px;
}
.fe-modal-overlay.open{ display:flex; }
.fe-modal{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:32px; width:100%; max-width:420px;
  max-height:88vh; overflow-y:auto;
}
.fe-modal-close{
  position:absolute; top:10px; right:12px; background:none; border:none;
  font-size:24px; line-height:1; color:var(--ink-soft); cursor:pointer; padding:4px;
}
.fe-modal-close:hover{ color:var(--ink); }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:12px 20px; border-radius:var(--radius); border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
/* Primary buttons use the Flow logo red on every page (matches the homepage). */
.btn-primary{ background:linear-gradient(135deg,var(--flow-red),var(--flow-red-deep)); color:var(--white); }
.btn-primary:hover{ background:linear-gradient(135deg,#C81219,#8A0C12); }
.btn-dark{ background:var(--panel); color:var(--white); }
.btn-dark:hover{ background:#000; }
.btn-ghost{ border-color:var(--line-dark); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-ghost.on-dark{ border-color:#3b4441; color:var(--white); }
.btn-ghost.on-dark:hover{ border-color:var(--accent-2); color:var(--accent-2); }
.btn-sm{ padding:9px 14px; font-size:11.5px; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }

/* ---------- hero / sections ---------- */
section{ padding:96px 0; }
section.tight{ padding:64px 0; }
.section-dark{ background:var(--panel); color:var(--white); }
.section-dark p{ color:#B7BEBA; }
.section-alt{ background:var(--bg-alt); }
.divider{ border:none; border-top:1px solid var(--line); margin:0; }
.divider.on-dark{ border-top-color:var(--line-dark); }

.hero{
  padding:70px 0 0;
  background:
    linear-gradient(var(--bg) 0%, var(--bg) 100%);
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding-bottom:60px;
}
.hero h1{ font-size:clamp(38px,5vw,64px); line-height:1.02; margin-bottom:22px; }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero .lede{ font-size:18px; max-width:46ch; }
.hero-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.hero-art{
  aspect-ratio:1/1; border:1px solid var(--line-dark);
  background:var(--panel);
  position:relative; overflow:hidden;
  border-radius:var(--radius);
}
.blueprint-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}
.hero-illustration{ position:relative; width:80%; height:80%; margin:10%; display:block; }
.hero-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-scrim{
  position:absolute; left:0; right:0; bottom:0; height:86px;
  background:linear-gradient(180deg, rgba(12,15,16,0) 0%, rgba(12,15,16,.82) 60%, rgba(12,15,16,.88) 100%);
}
.hero-photo-caption{
  position:absolute; left:0; right:0; bottom:0; padding:16px 22px;
  color:var(--white); font-family:var(--f-mono); font-size:13px;
}
.hero-photo-caption .plate-code{ font-size:11px; letter-spacing:.08em; margin-bottom:4px; }

/* ---------- stat strip ---------- */
.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stat-strip .stat{ padding:26px 32px; border-left:1px solid var(--line); }
.stat-strip .stat:first-child{ border-left:none; }
.stat .num{ font-family:var(--f-mono); font-size:32px; font-weight:600; color:var(--accent); }
.stat .label{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }

/* ---------- spec-plate cards (signature element) ---------- */
.plate-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.plate{
  background:var(--bg); padding:30px 26px; position:relative;
}
.plate::before, .plate::after{
  content:""; position:absolute; top:14px; width:6px; height:6px; border-radius:50%;
  background:var(--line); box-shadow:inset 0 0 0 1px var(--ink-soft);
}
.plate::before{ left:14px; } .plate::after{ right:14px; }
.plate .plate-code{ font-family:var(--f-mono); font-size:11px; color:var(--accent); letter-spacing:.08em; margin-bottom:10px; }
.plate h3{ font-size:19px; margin-bottom:8px; }
.plate p{ font-size:14px; margin-bottom:0; }

.plate-grid.dark{ background:var(--line-dark); border-color:var(--line-dark); }
.plate-grid.dark .plate{ background:var(--panel); }
.plate-grid.dark .plate::before,.plate-grid.dark .plate::after{ background:var(--line-dark); box-shadow:inset 0 0 0 1px #5a6360; }
.plate-grid.dark .plate p{ color:#AEB6B1; }
.plate-grid.dark h3{ color:var(--white); }

.contact-photo-plate{ text-align:center; }
.contact-photo-plate .contact-photo{
  width:132px; height:132px; object-fit:cover; display:block; margin:0 auto 14px;
  border-radius:var(--radius); border:1px solid var(--line-dark);
}
.contact-photo-plate h3{ font-size:16px; margin-bottom:2px; }
.contact-photo-plate p{ font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }

.archive-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:20px; }
.archive-card{ background:var(--bg); }
.archive-card img{ display:block; width:100%; height:260px; object-fit:cover; }
.archive-card p{ margin:0; padding:14px 18px; font-size:13.5px; color:var(--ink-soft); }

/* ---------- manufacturer list ---------- */
.mfr-list{ border-top:1px solid var(--line); }
.mfr-row{
  display:grid; grid-template-columns:220px 1fr; gap:32px;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.mfr-row .mfr-code{ font-family:var(--f-mono); font-size:12px; color:var(--accent); }
.mfr-row h3{ font-size:20px; margin:6px 0 4px; }
.mfr-row .mfr-tag{ font-size:13px; color:var(--ink-soft); font-family:var(--f-mono); }
.mfr-row .mfr-desc{ font-size:14.5px; }
.mfr-row .mfr-logo{ max-width:140px; max-height:44px; width:auto; height:auto; object-fit:contain; margin-bottom:14px; }
.mfr-row .mfr-logo-secondary{ max-width:90px; max-height:30px; margin-left:10px; display:inline-block; vertical-align:middle; }
.mfr-row .mfr-logo:first-child{ display:inline-block; vertical-align:middle; }
.mfr-subbrand-logo{ height:20px; width:auto; vertical-align:middle; margin-right:6px; }

/* ---------- forms ---------- */
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line-dark); background:var(--white);
  font-family:var(--f-body); font-size:14.5px; border-radius:var(--radius); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.hint{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; }

/* ---------- footer ---------- */
footer.site-footer{ background:var(--panel-2); color:#B7BEBA; padding:64px 0 28px; }
footer.site-footer h4{ color:var(--white); font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; font-family:var(--f-mono); font-weight:600;}
footer.site-footer a{ color:#B7BEBA; }
footer.site-footer a:hover{ color:var(--accent-2); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; }
/* A long email address must wrap inside its column instead of widening the page on a phone. */
.footer-grid > *{ min-width:0; }
footer.site-footer a, footer.site-footer p{ overflow-wrap:anywhere; }
.footer-bottom{ border-top:1px solid var(--line-dark); padding-top:22px; font-size:12.5px; display:flex; justify-content:space-between; font-family:var(--f-mono); }

/* ---------- quote widget ---------- */
.qb-table{ width:100%; border-collapse:collapse; }
.qb-table th{ text-align:left; font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); border-bottom:1px solid var(--line-dark); padding:10px 8px; }
.qb-table td{ padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.qb-table input{ border:1px solid var(--line); padding:8px 9px; font-size:13.5px; border-radius:var(--radius); font-family:var(--f-body); width:100%; }
.qb-totals{ margin-left:auto; width:280px; }
.qb-totals .row{ display:flex; justify-content:space-between; padding:8px 0; font-family:var(--f-mono); font-size:14px; }
.qb-totals .row.grand{ border-top:1px solid var(--ink); font-weight:700; font-size:17px; padding-top:14px; }

.tag{ display:inline-block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:2px; background:var(--accent); color:#fff; }
.tag.muted{ background:var(--line-dark); color:#cfd4d0; }

.req-card{ border:1px solid var(--line); border-left:3px solid var(--accent); padding:18px 20px; background:var(--white); margin-bottom:14px; border-radius:var(--radius); }
.req-card .meta{ font-family:var(--f-mono); font-size:11px; color:var(--ink-soft); margin-bottom:6px; }
.req-card h4{ font-size:16px; margin-bottom:6px; }
.empty-state{ border:1px dashed var(--line-dark); padding:40px; text-align:center; color:var(--ink-soft); font-family:var(--f-mono); font-size:13px; }

@media(max-width:1310px){
  nav.primary-nav, .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
}
/* Laptop widths (1366 px is the common one): the full menu, the red Make Contact
   button and the Staff button did not fit side by side below about 1410 px, so
   Staff was pushed off the right edge and the page scrolled sideways. The red
   button already says "Make Contact", so the duplicate menu link gives way here. */
@media(min-width:1311px) and (max-width:1480px){
  nav.primary-nav a[href="quote-request.html"]{ display:none; }
  nav.primary-nav{ gap:16px; }
  nav.primary-nav a{ letter-spacing:0; }
  .btn.header-cta{ padding:12px 16px; }
}
@media(max-width:860px){
  .hero-grid{ grid-template-columns:1fr; }
  .stat-strip{ grid-template-columns:repeat(2,1fr); }
  .plate-grid{ grid-template-columns:1fr; }
  .archive-grid{ grid-template-columns:1fr; }
  .mfr-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .field-row{ grid-template-columns:1fr; }
}
@media print{
  .site-header, footer.site-footer, .no-print{ display:none !important; }
  body{ background:#fff; }
}