/* ==========================================================================
   Mecpro Inc. — Blueprint skin (v2)
   Loaded after styles.css. Restyles the existing markup with an
   engineering-drawing look: condensed type, square machined edges,
   blueprint grids, title-block footer. Motion lives in motion.js.
   ========================================================================== */

:root {
  --navy-900: #111c2e;
  --navy-950: #0a1322;
  --blue-600: #2f62b8;
  --blue-700: #234c91;
  --blue-300: #8fb4ff;
  --bg-base: #f3f5f8;
  --bg-panel: #e9edf3;
  --footer-bg: #0a1322;
  --text-900: #0f1724;
  --text-700: #334155;
  --text-500: #5d6878;
  --text-mono: #6f7b8c;
  --border: #d3dae4;
  --steel: #9fb0c9;
  --ok: #46c97a;

  --font-sans: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Barlow Condensed', 'Barlow', 'Arial Narrow', sans-serif;
  --font-mono: 'IBM Plex Mono', SFMono-Regular, Consolas, monospace;

  --radius: 2px;
  --radius-sm: 2px;
  --ease-axis: cubic-bezier(.25, .1, .1, 1);
  --grid-dark: linear-gradient(rgba(143, 180, 255, .055) 1px, transparent 1px),
               linear-gradient(90deg, rgba(143, 180, 255, .055) 1px, transparent 1px);
  --grid-light: linear-gradient(rgba(47, 98, 184, .06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(47, 98, 184, .06) 1px, transparent 1px);
}

body {
  font-size: 16px;
  counter-reset: sec;
}

/* ---------- Type ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.05;
}
h4 { font-weight: 600; letter-spacing: 0; }
.hero h1, .page-header h1 { font-size: clamp(36px, 5vw, 56px); }
.section-head h2 { font-size: clamp(32px, 4vw, 46px); }
.card h3, .industry-card h3, .flow-card h3, .metro-card h3, .metro-cmm h3 { font-size: 22px; }
.capability-head h2 { font-size: 28px; }

/* Section labels: auto-numbered like drawing section views */
.eyebrow {
  counter-increment: sec;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .12em;
  gap: 0;
}
.eyebrow::before {
  content: "SEC. " counter(sec, upper-alpha) "\2013" counter(sec, upper-alpha);
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--text-mono);
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid currentColor;
  line-height: 1;
}
.dark .eyebrow::before, .hero .eyebrow::before { background: none; color: var(--steel); }

.tag, .spec-tag, .flow-tag, .compare-tag, .sys-chip { font-family: var(--font-mono); }

/* ---------- Buttons: square, mono, axis-sweep hover ---------- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 13px 22px;
  transition: color .2s linear, border-color .2s linear;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s var(--ease-axis);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn-primary::after {
  content: '\2192';
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: 0;
  transition: transform .32s var(--ease-axis);
}
.btn-primary:hover::after { transform: translateX(4px); }
.btn-primary { background: var(--blue-600); }
.btn-primary::before { background: var(--navy-950); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--blue-600); }
.btn-secondary { border-color: var(--text-900); color: var(--text-900); }
.btn-secondary::before { background: var(--text-900); }
.btn-secondary:hover, .btn-secondary:focus-visible { color: #fff; border-color: var(--text-900); }
.btn-on-dark { border-color: rgba(255, 255, 255, .45); }
.btn-on-dark::before { background: #fff; }
.btn-on-dark:hover, .btn-on-dark:focus-visible { color: var(--navy-950); border-color: #fff; }
.header-actions .btn { padding: 11px 18px; }
.btn-link { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }

/* ---------- Header ---------- */
.site-header {
  background: rgba(243, 245, 248, .94);
  border-bottom: 1px solid var(--border);
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 0;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--blue-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease-axis);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--text-900); }
.scroll-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  pointer-events: none;
}
.scroll-progress i {
  display: block;
  height: 100%;
  background: var(--blue-600);
  transform: scaleX(0);
  transform-origin: left;
}
@media (max-width: 860px) {
  .nav-links { background: var(--bg-base); }
  .nav-links a::after { display: none; }
}

/* ---------- Surfaces ---------- */
.panel { background-color: var(--bg-panel); border-color: var(--border); }
.dark, .spec-band, .cta-band, .page-header.dark {
  background-color: var(--navy-950);
  background-image: var(--grid-dark);
  background-size: 32px 32px;
}
.page-header {
  background-image: var(--grid-light);
  background-size: 32px 32px;
  border-bottom: 1px solid var(--border);
}
.page-header.has-band { background-image: none; }

/* ---------- Home hero ---------- */
.hero-video::before {
  background:
    var(--grid-dark),
    linear-gradient(100deg, rgba(8, 14, 25, .9) 0%, rgba(10, 19, 34, .74) 45%, rgba(10, 19, 34, .45) 100%);
  background-size: 32px 32px, 32px 32px, auto;
}
.hero-video { min-height: 640px; }
.hero-grid-v2 {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr minmax(0, 470px);
  gap: 48px;
  align-items: center;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel);
}
.hero-meta span::before { content: '\25C7'; margin-right: 8px; color: var(--blue-300); }
.hero.hero .hero-video p.lead { font-size: 19px; max-width: 520px; }
.hero-video h1 .accent, .hero.hero .hero-video p.lead .accent { color: var(--blue-300); }
@media (max-width: 980px) {
  .hero-grid-v2 { grid-template-columns: 1fr; gap: 36px; }
  .hero-video { min-height: 0; }
}

/* CAM backplot panel + DRO */
.cam-panel, .probe-panel {
  margin: 0;
  background: rgba(8, 14, 25, .78);
  border: 1px solid rgba(143, 180, 255, .28);
  position: relative;
  color: #dfe7f3;
  backdrop-filter: blur(2px);
}
.cam-panel::before, .cam-panel::after, .probe-panel::before, .probe-panel::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--blue-300);
  pointer-events: none;
}
.cam-panel::before, .probe-panel::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.cam-panel::after, .probe-panel::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
.cam-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(143, 180, 255, .2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel);
}
.cam-bar span:first-child { color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.cam-led {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(70, 201, 122, .18);
  animation: led 1.6s steps(2, jump-none) infinite;
}
@keyframes led { 50% { opacity: .35; } }
.cam-svg, .probe-svg { display: block; width: 100%; height: auto; }
.cam-stock { fill: none; stroke: rgba(159, 176, 201, .35); stroke-width: 1; stroke-dasharray: 4 5; }
.cam-part { fill: rgba(143, 180, 255, .04); stroke: rgba(159, 176, 201, .55); stroke-width: 1; transition: fill .6s linear; }
.cam-panel.is-done .cam-part { fill: rgba(143, 180, 255, .16); }
.cam-dims path { fill: none; stroke: rgba(143, 180, 255, .55); stroke-width: 1; }
.cam-dims .cam-arrow { fill: rgba(143, 180, 255, .7); stroke: none; }
.cam-dims text, .cam-datum text { font-family: var(--font-mono); font-size: 10px; fill: var(--blue-300); letter-spacing: .05em; }
.cam-datum circle, .cam-datum path { fill: none; stroke: var(--steel); stroke-width: 1; }
.cam-rapid { fill: none; stroke: rgba(255, 196, 77, .55); stroke-width: 1; stroke-dasharray: 3 4; }
.cam-cut { fill: none; stroke: var(--blue-300); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cam-tool { fill: rgba(255, 255, 255, .12); stroke: #fff; stroke-width: 1.5; }
.cam-dro {
  display: grid;
  grid-template-columns: repeat(5, auto) 1fr;
  gap: 4px 16px;
  align-items: baseline;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(143, 180, 255, .2);
  font-family: var(--font-mono);
  font-size: 12px;
}
.cam-dro b { color: var(--steel); font-weight: 500; margin-right: 6px; }
.cam-dro em { font-style: normal; color: #fff; font-variant-numeric: tabular-nums; }
.cam-status { justify-self: end; font-size: 10.5px; letter-spacing: .1em; color: var(--ok); text-transform: uppercase; }
@media (max-width: 520px) {
  .cam-dro { grid-template-columns: repeat(3, auto); }
  .cam-status { justify-self: start; grid-column: 1 / -1; }
  .cam-bar span:last-child { display: none; }
}

/* G-code strip (controller readout) */
.gcode-strip {
  display: flex;
  align-items: center;
  background: #070d18;
  border-top: 1px solid rgba(143, 180, 255, .16);
  border-bottom: 1px solid rgba(143, 180, 255, .16);
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(159, 176, 201, .8);
  overflow: hidden;
  white-space: nowrap;
}
.gcode-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  color: #fff;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 10.5px;
  background: #0a1322;
  border-right: 1px solid rgba(143, 180, 255, .2);
  z-index: 1;
}
.gcode-track { overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
.gcode-run { display: inline-block; padding: 11px 0; }
html.motion .gcode-run { animation: gcode 70s linear infinite; }
@keyframes gcode { to { transform: translateX(-50%); } }

/* ---------- Spec cards ---------- */
.spec-band { padding: 44px 0 52px; }
.spec-card, .card, .industry-card, .metro-card, .metro-cmm, .metro-iso, .flow-card,
.compare-card, .va-card, .matrix, .info-card, .form-card, .capability-intro, .auto-card,
.hero-glance, .hero-flow, .cert-banner, table.spec-table, .media-placeholder, .intro-photo,
.compare-list li, .va-box, .glance-chips span, .svc-pills span, .upload-box,
.field input, .field textarea, .field select, .map-embed, .form-notice, .form-status, .mx-note {
  border-radius: var(--radius);
}
.spec-card {
  position: relative;
  background: rgba(10, 19, 34, .6);
  border-color: rgba(143, 180, 255, .22);
}
.spec-value { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; }
.spec-value [data-count] { font-variant-numeric: tabular-nums; }
.spec-title::before { animation: led 1.6s steps(2, jump-none) infinite; }
/* dimension line drawn across the top of each spec card */
.dim-top {
  position: absolute;
  left: 22px; right: 22px; top: -9px;
  height: 18px;
  pointer-events: none;
}
.dim-top::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 8px;
  height: 1px;
  background: var(--blue-300);
  transform-origin: center;
}
.dim-top::after {
  content: '';
  position: absolute;
  inset: 0;
  border-left: 1px solid var(--blue-300);
  border-right: 1px solid var(--blue-300);
}

/* ---------- Cards: machined edges, fixture-locate hover ---------- */
.card, .industry-card, .metro-card, .metro-cmm, .flow-card, .va-card, .compare-card, .auto-card, .capability-intro, .info-card {
  outline: 1px solid transparent;
  outline-offset: 10px;
  transition: outline-offset .3s var(--ease-axis), outline-color .3s linear, border-color .3s linear;
}
.card:hover, .industry-card:hover, .metro-card:hover, .metro-cmm:hover, .flow-card:hover, .va-card:hover, .auto-card:hover, .capability-intro:hover {
  outline-color: rgba(47, 98, 184, .55);
  outline-offset: 4px;
}
.dark .card:hover, .dark .industry-card:hover, .dark .metro-card:hover, .dark .metro-cmm:hover { outline-color: rgba(143, 180, 255, .55); }
.card ul li::before, .va-box li::before { border-radius: 0; width: 5px; height: 5px; top: 8px; }
.industry-card { border-top-width: 2px; border-top-color: var(--blue-300); background: rgba(10, 19, 34, .55); }
.industry-card .industry-icon, .card .icon, .checklist-item .icon, .info-row .icon, .va-icon, .capability-icon, .cert-icon, .hf-icon, .metro-card .icon, .flow-num {
  border-radius: 0;
}
.industry-card .industry-icon { border: 1px solid rgba(143, 180, 255, .35); background: transparent; }
.checklist-item .icon { border: 1px solid var(--border); background: #fff; }
.spec, .va-chip, .flow-tag, .sys-chip, .compare-tag { border-radius: 0; }
.footer-badge, .svc-pills span, .glance-chips span { border-radius: 0; }
.footer-badge::before, .svc-pills span::before { border-radius: 0; }

/* ---------- Media: scan-line reveal ---------- */
.media-placeholder.has-photo { position: relative; }
.media-placeholder.has-photo::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: var(--blue-300);
  box-shadow: 0 0 18px 4px rgba(143, 180, 255, .55);
  opacity: 0;
}

/* ---------- Tables ---------- */
table.spec-table { border-collapse: separate; border-spacing: 0; }
table.spec-table th { font-family: var(--font-mono); letter-spacing: .1em; background: var(--bg-panel); }
table.spec-table td:not(:first-child) { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
table.spec-table tbody tr { transition: background-color .2s linear; }
table.spec-table tbody tr:hover { background: #f3f7ff; }
table.spec-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--blue-600); }
.capability-icon { background: var(--navy-950); }
.capability-head .tag { border: 1px solid var(--border); padding: 4px 8px; background: #fff; }

/* Tab nav with sliding indicator */
.tab-nav { background: rgba(243, 245, 248, .96); }
.tab-nav .wrap { position: relative; }
.tab-nav a { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; transition: color .2s linear; }
.tab-nav a.is-current { color: var(--text-900); }
.tab-ind {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--blue-600);
  transition: transform .35s var(--ease-axis), width .35s var(--ease-axis);
  pointer-events: none;
}

/* ---------- Quality: probe panel ---------- */
.standards-row {
  display: grid;
  grid-template-columns: 1fr minmax(0, 420px);
  gap: 40px;
  align-items: center;
  margin-bottom: 36px;
}
.standards-row .section-head { margin-bottom: 0; }
.probe-panel { background: var(--navy-950); }
.probe-part { fill: rgba(143, 180, 255, .05); stroke: rgba(159, 176, 201, .55); stroke-width: 1; }
.probe-bore { fill: #070d18; stroke: rgba(159, 176, 201, .7); stroke-width: 1; }
.probe-halo { fill: rgba(210, 51, 74, .14); stroke: rgba(210, 51, 74, .35); stroke-width: 1; }
.probe-ball { fill: #d2334a; stroke: #ff8a99; stroke-width: .8; }
.probe-glint { fill: rgba(255, 255, 255, .85); }
.probe-hits path { fill: none; stroke: var(--ok); stroke-width: 1.4; }
.probe-hits circle { fill: var(--ok); }
.probe-table { padding: 8px 14px 12px; border-top: 1px solid rgba(143, 180, 255, .2); font-family: var(--font-mono); font-size: 11px; }
.probe-row { display: grid; grid-template-columns: 34px 1fr 1fr 52px; gap: 8px; padding: 3px 0; color: #dfe7f3; font-variant-numeric: tabular-nums; }
.probe-head { color: var(--steel); letter-spacing: .08em; text-transform: uppercase; font-size: 10px; border-bottom: 1px solid rgba(143, 180, 255, .14); padding-bottom: 5px; margin-bottom: 3px; }
.probe-row .ok { color: var(--ok); }
.probe-rows { min-height: 104px; }
.probe-result { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(143, 180, 255, .14); color: var(--ok); letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }
@media (max-width: 900px) { .standards-row { grid-template-columns: 1fr; } }

/* ---------- Services: process line draws ---------- */
.flow-grid::before { background: linear-gradient(90deg, var(--blue-600), var(--blue-600) 76%, #059669 92%); transform-origin: left; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; padding: 76px 0; border-top: 1px solid rgba(143, 180, 255, .16); }
.cta-band h2 { font-size: clamp(32px, 4vw, 48px); }
.cta-band .wrap { position: relative; }
.cta-band .wrap::before, .cta-band .wrap::after {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--blue-300);
  top: -28px; left: 24px;
  border-right: 0; border-bottom: 0;
}
.cta-band .wrap::after { top: auto; left: auto; bottom: -28px; right: 24px; border: 1px solid var(--blue-300); border-left: 0; border-top: 0; }
.cta-band .btn-secondary { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.cta-band .btn-secondary::before { background: #fff; }
.cta-band .btn-secondary:hover { color: var(--navy-950); border-color: #fff; }

/* ---------- Footer: title block ---------- */
.site-footer { background: var(--footer-bg); color: #c9d5e6; padding-top: 60px; }
.footer-grid h4 { color: var(--steel); font-weight: 500; letter-spacing: .12em; }
.footer-grid a, .footer-grid li { color: #c9d5e6; }
.footer-grid a:hover { color: #fff; }
.footer-brand p { color: rgba(201, 213, 230, .75); }
.footer-badge { background: transparent; border-color: rgba(143, 180, 255, .3); color: #dfe7f3; font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.title-block {
  display: grid;
  grid-template-columns: 2fr 1.4fr 1fr .5fr;
  gap: 0;
  margin-top: 44px;
  padding-top: 0;
  border: 1px solid rgba(143, 180, 255, .3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #dfe7f3;
}
.tb-cell { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-left: 1px solid rgba(143, 180, 255, .3); }
.tb-cell:first-child { border-left: 0; }
.tb-label { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
@media (max-width: 760px) {
  .title-block { grid-template-columns: 1fr 1fr; }
  .tb-wide { grid-column: 1 / -1; border-bottom: 1px solid rgba(143, 180, 255, .3); }
  .tb-cell:nth-child(2) { border-left: 0; }
  .tb-cell:nth-child(4) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(143, 180, 255, .3); }
}

/* ---------- Forms ---------- */
.form-card { border-top: 2px solid var(--blue-600); }
.field label { font-size: 10.5px; letter-spacing: .1em; }
.field input, .field textarea, .field select { background: #fff; transition: border-color .2s linear, box-shadow .2s linear; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue-600); box-shadow: inset 0 -2px 0 var(--blue-600); }
.upload-box { background-image: var(--grid-light); background-size: 16px 16px; }

/* ==========================================================================
   Motion states (only when html.motion is set by the head script)
   ========================================================================== */
html.motion [data-rv] {
  opacity: 0;
  transform: translate3d(var(--rx, 0), var(--ry, 18px), 0);
  transition: opacity .5s linear var(--d, 0s), transform .7s var(--ease-axis) var(--d, 0s);
}
html.motion [data-rv].is-in { opacity: 1; transform: none; }

html.motion .dim-top::before { transform: scaleX(0); transition: transform .7s var(--ease-axis) calc(var(--d, 0s) + .15s); }
html.motion .dim-top::after { opacity: 0; transition: opacity .2s linear calc(var(--d, 0s) + .1s); }
html.motion .is-in .dim-top::before { transform: scaleX(1); }
html.motion .is-in .dim-top::after { opacity: 1; }

html.motion .media-placeholder.has-photo[data-rv], html.motion img[data-scan] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(.6, 0, .2, 1) var(--d, 0s), opacity .2s linear var(--d, 0s);
}
html.motion .media-placeholder.has-photo[data-rv] { transform: none; }
html.motion .media-placeholder.has-photo.is-in, html.motion img[data-scan].is-in { clip-path: inset(0 0 0 0); }
html.motion .media-placeholder.has-photo.is-in::after { animation: scan 1.1s cubic-bezier(.6, 0, .2, 1) var(--d, 0s) both; }
@keyframes scan { 0% { left: 0; opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 2px); opacity: 0; } }

html.motion .flow-grid::before { transform: scaleX(0); transition: transform 1.6s var(--ease-axis) .2s; }
html.motion .flow-grid.is-drawn::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .cam-led, .spec-title::before { animation: none; }
  .gcode-run { animation: none !important; }
}

/* keep unit symbols (µm, Ø) in their true case */
.spec-unit { text-transform: none; }

/* Cloudflare Turnstile check above the submit button */
.cf-turnstile { margin: 0 0 16px; min-height: 65px; }

/* Staged drawing files on the quote form */
.file-list { margin: -10px 0 20px; padding: 0; list-style: none; border: 1px solid var(--border); background: #fff; font-size: 13.5px; }
.file-list-head { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--bg-panel); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-500); }
.file-item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 9px 8px 9px 12px; border-bottom: 1px solid var(--border); }
.file-item:last-child { border-bottom: 0; }
.file-type { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; padding: 3px 6px; min-width: 44px; text-align: center; border: 1px solid; }
.file-type-pdf { color: #b42318; border-color: #f3c4bf; background: #fff5f4; }
.file-type-step { color: var(--blue-700); border-color: #c9dafd; background: #eef3ff; }
.file-type-cad { color: var(--text-700); border-color: var(--border); background: var(--bg-base); }
.file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-900); font-weight: 500; }
.file-size { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-500); white-space: nowrap; }
.file-remove { width: 30px; height: 30px; border: 1px solid transparent; background: none; color: var(--text-500); font-size: 20px; line-height: 1; cursor: pointer; transition: color .15s linear, border-color .15s linear, background .15s linear; }
.file-remove:hover, .file-remove:focus-visible { color: #b42318; border-color: #f3c4bf; background: #fff5f4; }
@media (max-width: 520px) { .file-list-head span:last-child { display: none; } }

/* Footer copyright line */
.footer-copy { margin: 44px 0 0; padding-top: 18px; border-top: 1px solid rgba(143, 180, 255, .16); font-size: 12.5px; color: rgba(201, 213, 230, .6); }