/* ============================================================
   A1 Builder's Supplies Corp - site.css
   "The shop drawing come alive"
   Business-card green + job-ticket white
   Big Shoulders Display / IBM Plex Sans / IBM Plex Mono
   ============================================================ */

:root {
  /* color */
  --coal: #0c241f;
  --coal-2: #123f37;
  --gunmetal: #f2f6f1;
  --smoke: #cbd9d2;
  --steel-line: rgba(16, 18, 21, 0.16);
  --steel-text: #25443d;
  --steel-dim: #63766f;
  --concrete: #fffef9;
  --concrete-2: #f3f8ea;
  --form-ply: #e4ecd9;
  --ink: #0c241f;
  --ink-muted: #3f5851;
  --safety: #123f37;
  --safety-deep: #071f1b;
  --annotate: #1f685a;
  --annotate-deep: #0e3b33;
  --control-line: #809890;
  --paper: #fffef9;
  --paper-2: #f7faef;
  --vest-soft: #dcebe5;
  --galvanized: #e6ece0;
  --rule: #b3261e;

  /* type */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-stencil: "Big Shoulders Stencil Display", "Big Shoulders Display", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;

  --container: 78rem;
  --seam: 0rem; /* diagonal plate-cut depth - flattened to calm section boundaries */
  --ease-stamp: cubic-bezier(0.34, 1.4, 0.44, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding: anchor targets (nav dropdowns jump to #pf-…/#sv-…/#order-group-…)
   must land below the fixed header, not underneath it */
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--coal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }

/* Official supplier marks, kept in their original colors on white. */
.a1-service-benefits,
.supplier-brands {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  background: #ffffff;
  border-top: 1px solid var(--steel-line);
}
.a1-service-benefits h2,
.supplier-brands h2 {
  color: var(--coal-2);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.1;
}
.a1-service-benefits { padding-bottom: 1.5rem; }
.supplier-brands h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.a1-section-heading {
  margin-bottom: 1.5rem;
}
.a1-yard-label {
  margin: 0 0 0.65rem;
  color: var(--steel-text);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.supplier-carousel {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-block: 1px solid var(--steel-line);
}
.supplier-carousel::-webkit-scrollbar { display: none; }
.supplier-motion-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.75rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--brand-ink, #123f37);
  background: #fff;
  color: var(--brand-ink, #123f37);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.supplier-motion-toggle:focus-visible {
  outline: 3px solid var(--brand-ink, #123f37);
  outline-offset: 3px;
}
.supplier-logo-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.supplier-logo-track li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 clamp(10rem, 19vw, 14rem);
  width: clamp(10rem, 19vw, 14rem);
  min-height: 8rem;
  padding: 1.5rem;
  border-right: 1px solid var(--steel-line);
  background: #ffffff;
}
.supplier-logo-track img {
  display: block;
  width: 100%;
  max-width: 12rem;
  height: 4.5rem;
  object-fit: contain;
}
/* Remove only empty canvas in layout; the official source files stay intact. */
.supplier-logo-track img.supplier-logo--primesource {
  height: auto;
  aspect-ratio: 500 / 150;
  object-fit: cover;
}
.supplier-logo-track img.supplier-logo--iko {
  height: auto;
  aspect-ratio: 936 / 160;
  object-fit: cover;
}
.supplier-logo-track img.supplier-logo--johns-manville { max-width: 134px; }
.supplier-logo-track img.supplier-logo--super-stud { max-width: 188px; }
.a1-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.a1-benefits li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--steel-line);
}
.a1-benefits svg {
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 0.1rem;
  fill: none;
  color: var(--coal-2);
  stroke: var(--coal-2);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.a1-benefits h3 {
  margin: 0 0 0.5rem;
  color: var(--coal-2);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}
.a1-benefits p {
  max-width: 32ch;
  margin: 0;
  color: var(--steel-text);
  font-size: 1rem;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .a1-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
}
@media (max-width: 600px) {
  .a1-benefits { grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
  .a1-benefits li { padding-block: 1.4rem; }
  .a1-benefits p { max-width: none; }
}
@media (max-width: 640px) {
  .supplier-logo-track li { min-height: 6.5rem; padding: 1rem; }
  .supplier-logo-track img { height: 3.75rem; }
}
a { color: inherit; }
button { font: inherit; cursor: pointer; }
/* kill the legacy double-tap zoom delay on touch devices without
   blocking pinch-zoom on the page itself */
a, button, input, select, label { touch-action: manipulation; }
h1, h2, h3, h4 { margin: 0; line-height: 1; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--safety); outline-offset: 3px; }
::selection { background: var(--safety); color: #101215; }

.container { width: min(var(--container), 100% - 2.5rem); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 430;
  background: var(--safety); color: #101215; padding: 0.75rem 1.25rem;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* film grain over everything - kills the flat vector look */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 250; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
}

/* caution stripe - reusable hazard band */
.caution-stripe {
  height: 8px;
  background: repeating-linear-gradient(-45deg, var(--safety) 0 14px, var(--coal) 14px 28px);
}

/* ---------- scroll progress: a bar of steel being fed ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 4px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: var(--safety);
  z-index: 410; pointer-events: none;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 400;
  background: rgba(16, 18, 21, 0.96);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
.site-header::before {
  content: ""; display: block; height: 3px;
  background: var(--safety);
}
.site-header.is-scrolled {
  background: rgba(16, 18, 21, 0.96);
  border-bottom-color: var(--steel-line);
}
.nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 0.8rem 0; flex-wrap: wrap;
}



/* brand as a stamped bundle tag */
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: #fff; }
.brand-mark {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--safety); color: #101215;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.brand-name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.7rem;
  letter-spacing: 0.05em; text-transform: uppercase; line-height: 1;
  white-space: nowrap;
}
.brand-name small {
  display: block; font-family: var(--font-mono); font-size: 0.56rem;
  font-weight: 500; letter-spacing: 0.16em; color: var(--steel-dim);
  margin-top: 0.3rem; text-transform: uppercase;
}
/* the full corp name is wide; keep it compact when the full nav wraps. */
@media (max-width: 640px) {
  .brand-name { font-size: 1.05rem; }
  .brand-name small { letter-spacing: 0.12em; }
}
.nav-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0; row-gap: 0.2rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; padding: 0.55rem 0.62rem;
  color: var(--steel-text); text-decoration: none;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-links a:hover { color: #fff; border-bottom-color: var(--steel-dim); }
.nav-links a[aria-current="page"] { color: #fff; border-bottom-color: var(--safety); }
.nav-cta {
  margin-left: 0.5rem;
  background: var(--safety); color: #101215 !important;
  font-weight: 600 !important; border-bottom: none !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: background 0.2s, transform 0.15s var(--ease-stamp) !important;
}
.nav-cta:hover { background: var(--safety-deep); transform: translateY(-1px); }
.nav-cta svg { display: none; }

/* catalog category dropdown - markup generated by build/make_nav_dropdown.py */
.nav-drop-li { position: relative; }
.nav-drop-li .nav-caret {
  width: 10px; height: 10px; margin-left: 0.4rem;
  display: inline-block; vertical-align: middle;
  transition: transform 0.18s var(--ease-out);
}
.nav-drop-li:focus-within .nav-caret { transform: rotate(180deg); }
.nav-drop {
  position: absolute; top: 100%; right: 0; width: 640px;
  max-height: calc(100vh - 120px); overflow-y: auto;
  background: rgba(16, 18, 21, 0.98);
  border: 1px solid var(--steel-line); border-top: 2px solid var(--safety);
  padding: 0.9rem 1.1rem 1.1rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s var(--ease-out) 0.08s, visibility 0.15s 0.08s;
}
.nav-drop-li:focus-within .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition-delay: 0s;
}
/* Hover-open only on true mouse/trackpad devices; on touch-primary large
   screens (Surface, iPad landscape) sticky :hover would trap the panel open,
   so the parent link simply navigates instead. Keyboard access stays via the
   ungated :focus-within rules above. */
@media (hover: hover) and (pointer: fine) {
  .nav-drop-li:hover .nav-caret { transform: rotate(180deg); }
  .nav-drop-li:hover .nav-drop {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition-delay: 0s;
  }
}
.nav-drop-all {
  display: block; margin-bottom: 0.7rem; padding: 0.5rem 0.5rem 0.7rem !important;
  border-bottom: 1px solid var(--steel-line) !important;
  color: var(--safety) !important; font-weight: 600 !important;
}
.nav-drop-all:hover { color: var(--safety) !important; }
.nav-drop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 0.8rem; }
.nav-drop-grid a {
  /* comfortable pointer target for a 41-entry grid; 44px rows would triple the panel */
  padding: 0.45rem 0.5rem; font-size: 0.7rem; letter-spacing: 0.08em;
  border-bottom: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-drop-grid a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav-drop--taxonomy {
  width: min(18.25rem, calc(100vw - 2rem));
  min-height: 0;
  overflow: visible;
  padding-bottom: 0.7rem;
}

.nav-drop--taxonomy .nav-drop-all {
  margin-bottom: 0.45rem;
  padding: 0.38rem 0.5rem 0.48rem !important;
}
.nav-drop-grid--taxonomy {
  grid-template-columns: 1fr;
  gap: 0.07rem;
}
.nav-drop-group {
  position: relative;
  min-width: 0;
  min-height: 2.08rem;
  padding: 0.04rem 0 0.18rem;
  border-bottom: 1px solid rgba(170, 180, 192, 0.18);
}
.nav-drop-group:hover,
.nav-drop-group:focus-within {
  z-index: 10;
}
.nav-drop-grid a.nav-drop-parent {
  color: #fff;
  font-weight: 700;
  white-space: normal;
  line-height: 1.1;
  position: relative;
}
.nav-drop-grid--taxonomy a.nav-drop-parent {
  padding: 0.42rem 1.75rem 0.42rem 0.58rem;
}
.nav-drop-group--has-children .nav-drop-parent::after {
  content: "";
  position: absolute;
  right: 0.64rem;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.7;
}
.nav-drop-group--has-children:hover .nav-drop-parent::after,
.nav-drop-group--has-children:focus-within .nav-drop-parent::after {
  opacity: 1;
}
.nav-drop-subgrid {
  display: grid;
  gap: 0.12rem;
  position: absolute;
  top: -0.34rem;
  left: calc(100% - 1px);
  right: auto;
  width: min(13.75rem, calc(100vw - 2rem));
  z-index: 5;
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  padding: 0;
  background: rgba(16, 18, 21, 0.99);
  border: 1px solid rgba(170, 180, 192, 0.24);
  box-shadow: 14px 14px 24px rgba(0, 0, 0, 0.32);
  pointer-events: none;
  transition: max-height 0.2s var(--ease-out), opacity 0.16s var(--ease-out),
    visibility 0.16s, padding 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}
.nav-drop-group:hover .nav-drop-subgrid,
.nav-drop-group:focus-within .nav-drop-subgrid {
  max-height: 12rem;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  margin-top: 0;
  padding: 0.38rem;
  pointer-events: auto;
}
.nav-drop-grid a.nav-drop-sub {
  position: relative;
  padding: 0.36rem 0.42rem 0.36rem 0.9rem;
  color: var(--steel-dim);
  font-size: 0.62rem;
  line-height: 1.14;
  letter-spacing: 0.06em;
  white-space: normal;
}
.nav-drop-grid a.nav-drop-sub::before {
  content: "";
  position: absolute;
  left: 0.38rem;
  top: 50%;
  width: 4px;
  height: 4px;
  transform: translateY(-50%);
  background: var(--safety);
}
/* small menus (page sections, order-sheet groups) list in one narrow column */
.nav-drop--compact { width: 300px; }
.nav-drop--compact .nav-drop-grid { grid-template-columns: 1fr; }

@media (max-width: 1255px) {
  .nav-links {
    flex: 1 1 100%;
    justify-content: flex-start;
    row-gap: 0.25rem;
  }
  .nav-links a { font-size: 0.74rem; padding: 0.5rem 0.48rem; }
  .nav-cta { margin-left: 0; }
  .nav-drop--taxonomy { right: auto; left: 0; width: min(24rem, calc(100vw - 2rem)); }
  .nav-drop-grid--taxonomy { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .nav-bar { flex-direction: column; align-items: flex-start; }
  .nav-links { width: 100%; justify-content: flex-start; }
  .nav-links a { font-size: 0.72rem; padding: 0.45rem 0.42rem; }
  /* Same mobile behavior as Pond Ready Mix: the header stays visible, while
     dropdown panels become plain parent links on narrow screens. */
  .nav-drop, .nav-drop-li .nav-caret { display: none; }
}

/* ---------- buttons: stamped steel plates ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 1rem 1.9rem; border: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: transform 0.18s var(--ease-stamp), background 0.2s, color 0.2s;
  min-height: 48px;
}
.btn svg { width: 18px; height: 18px; transition: transform 0.2s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(2px); }
.btn-primary { background: var(--safety); color: #101215; }
.btn-primary:hover { background: var(--safety-deep); transform: translateY(-2px); }
.btn-ghost {
  background: rgba(170, 180, 192, 0.13); color: #fff;
}
.btn-ghost:hover { background: rgba(170, 180, 192, 0.22); transform: translateY(-2px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2b3138; transform: translateY(-2px); }

/* ============================================================
   HERO - the fabrication drawing
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  background: var(--coal); color: var(--steel-text);
  padding: clamp(8.5rem, 15vh, 11rem) 0 0;
}
/* ghost stencil word */
.hero .ghost-word {
  position: absolute; top: 12%; left: -1%; z-index: 0;
  font-family: var(--font-stencil); font-weight: 700;
  font-size: clamp(5.5rem, 18vw, 16rem); line-height: 0.9;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: rgba(170, 180, 192, 0.032);
  user-select: none; pointer-events: none; white-space: nowrap;
}
.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-bottom: clamp(3rem, 7vh, 5rem);
}
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }

/* title-block strip above the headline */
.hero-titleblock {
  display: inline-flex; flex-wrap: wrap; align-items: stretch;
  border: 1px solid var(--smoke); margin-bottom: 2rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--steel-dim);
}
.hero-titleblock span { padding: 0.5rem 0.9rem; border-right: 1px solid var(--smoke); }
.hero-titleblock span:last-child { border-right: 0; }
.hero-titleblock .hot { color: var(--safety); }

/* stacked stamping headline - hidden initial states are gated on html.js
   so the page renders complete without JavaScript */
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 10vw, 7.5rem);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em;
  color: #fff; line-height: 0.92;
}
.hero h1 .stamp-line { display: block; overflow: hidden; }
.hero h1 .stamp-line > span { display: inline-block; }
.js .hero h1 .stamp-line > span { transform: translateY(110%); }
.play .stamp-line > span { animation: stamp-in 0.55s var(--ease-stamp) forwards; }
.play .stamp-line:nth-child(1) > span { animation-delay: 0.15s; }
.play .stamp-line:nth-child(2) > span { animation-delay: 0.8s; }
.play .stamp-line:nth-child(3) > span { animation-delay: 1.5s; }
.hero h1 .stamp-line:nth-child(3) > span { color: var(--safety); }
@keyframes stamp-in {
  0% { transform: translateY(110%); }
  70% { transform: translateY(-4%); }
  100% { transform: translateY(0); }
}

.hero-sub {
  max-width: 50ch; font-size: clamp(1rem, 1.4vw, 1.14rem);
  color: var(--steel-text); margin: 1.8rem 0 2.4rem;
}
.js .hero-sub { opacity: 0; transform: translateY(14px); }
.play .hero-sub { animation: fade-up 0.7s var(--ease-out) 2s forwards; }
@keyframes fade-up { to { opacity: 1; transform: none; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.js .hero .hero-actions { opacity: 0; transform: translateY(14px); }
.play .hero-actions { animation: fade-up 0.7s var(--ease-out) 2.2s forwards; }

/* yard tags under the CTAs */
.loc-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.4rem; }
.js .loc-chips { opacity: 0; }
.play .loc-chips { animation: fade-up 0.7s var(--ease-out) 2.4s forwards; }
.loc-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.9rem 0.5rem 1.4rem; text-decoration: none;
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.06em;
  color: var(--steel-text);
  border: 1px solid var(--smoke);
  clip-path: polygon(0 50%, 12px 0, 100% 0, 100% 100%, 12px 100%);
  background: var(--coal-2);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.loc-chip::before {
  content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--coal); box-shadow: 0 0 0 1.5px var(--steel-dim);
}
.loc-chip svg { width: 13px; height: 13px; color: var(--safety); }
.loc-chip:hover { border-color: var(--safety); color: #fff; background: #1c1410; }

/* --- the drawing sheet with the bending bar --- */
.draw-sheet {
  position: relative;
  border: 1px solid var(--smoke);
  background:
    linear-gradient(rgba(89, 200, 222, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89, 200, 222, 0.045) 1px, transparent 1px),
    var(--coal-2);
  background-size: 28px 28px, 28px 28px, auto;
}
.draw-sheet .sheet-corner {
  position: absolute; right: -1px; bottom: -1px;
  display: flex; border: 1px solid var(--smoke);
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--steel-dim); background: var(--coal);
}
.draw-sheet .sheet-corner span { padding: 0.4rem 0.7rem; border-left: 1px solid var(--smoke); }
.draw-sheet .sheet-corner span:first-child { border-left: 0; }
.draw-sheet svg { display: block; width: 100%; height: auto; }

/* wall-framing animation - a stud wall section draws itself, member by
   member: plates, studs at 16" O.C., jacks, then the doubled header. */
.wall path, .wall line, .slab path, .slab line {
  fill: none; stroke: #e8e4da; stroke-linecap: butt; stroke-width: 7;
}
.wall .plate { stroke-width: 10; }
.wall .header, .slab .hot { stroke: var(--safety); stroke-width: 12; }
.wall .ground, .slab .ground { stroke: var(--steel-dim); stroke-width: 1.5; }
/* slab section: subgrade, base, vapour barrier, reinforcing, pour */
.slab .base { stroke: var(--steel-dim); stroke-width: 5; stroke-dasharray: 3 7; }
.slab .barrier { stroke: var(--annotate); stroke-width: 2.5; }
.slab .pour { stroke: #cdc9bf; stroke-width: 75; }
.slab .bar { stroke: var(--safety); stroke-width: 6; }
.slab .chair { stroke: var(--steel-text); stroke-width: 3; }
.slab .grade { stroke: var(--steel-dim); stroke-width: 2; stroke-dasharray: 2 6; }
.js .wall [pathLength], .js .slab [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
/* subgrade and compacted base keep their dashed drafting convention rather
   than being dash-animated, which would render them solid */
.js .slab .base, .js .slab .grade { stroke-dasharray: 3 7 !important; stroke-dashoffset: 0 !important; animation: none !important; }
.play .wall [pathLength], .play .slab [pathLength] {
  animation: draw-line 0.7s var(--ease-out) forwards;
  animation-delay: calc(0.25s + var(--i, 0) * 0.18s);
}
.hero:not(.play) .wall [pathLength], .hero:not(.play) .slab [pathLength] { stroke-dashoffset: 0; }

/* division split on the home page */
.division-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; background: transparent; border: 0; }
@media (max-width: 860px) { .division-grid { grid-template-columns: 1fr; } }
.division {
  background: var(--coal); padding: 2rem 1.9rem 2.1rem;
  display: flex; flex-direction: column; gap: 0.6rem; position: relative;
  transition: background 0.25s;
}
.division:hover { background: var(--coal-2); }
.division .div-no {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--safety);
}
.division h3 {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  text-transform: uppercase; color: #fff; line-height: 0.98;
}
.division p { color: var(--steel-dim); font-size: 0.97rem; margin: 0; }
.division .div-list {
  list-style: none; margin: 0.4rem 0 0; padding: 0;
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.04em;
  color: var(--steel-text); display: grid; gap: 0.34rem;
}
.division .div-list li::before { content: "▸ "; color: var(--safety); }
.division .btn { margin-top: 1.3rem; align-self: flex-start; }
.division svg.div-mark { width: 100%; height: auto; margin-bottom: 0.4rem; }
.division svg.div-mark path, .division svg.div-mark line { fill: none; stroke: var(--steel-dim); stroke-width: 2.4; }
.division svg.div-mark .hot { stroke: var(--safety); }
.division:hover svg.div-mark path, .division:hover svg.div-mark line { stroke: var(--steel-text); }


/* dimension annotations draw last */
.dim { stroke: var(--annotate); stroke-width: 1.2; fill: none; opacity: 0; }
.dim-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; fill: var(--annotate); opacity: 0; }
.play .dim, .play .dim-label { animation: dim-in 0.5s var(--ease-out) both; }
.play .dim { animation-delay: 2.45s; }
.play .dim-label { animation-delay: 2.65s; }
.hero:not(.play) .dim, .hero:not(.play) .dim-label { opacity: 1; }
@keyframes dim-in { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   BEND SCHEDULE - stats as a real schedule table
   ============================================================ */
.schedule { border-top: 1px solid var(--steel-line); background: var(--coal-2); position: relative; z-index: 2; }
.schedule table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); color: var(--steel-text);
}
.schedule caption {
  text-align: left; padding: 1.1rem 0 0.7rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--safety);
}
.schedule th {
  text-align: left; font-weight: 500; font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--steel-dim);
  border-bottom: 1px solid var(--steel-line); padding: 0.5rem 1rem 0.5rem 0;
}
.schedule td { border-bottom: 1px solid var(--steel-line); padding: 0.85rem 1rem 0.85rem 0; font-size: 0.9rem; }
.schedule tr:last-child td { border-bottom: 0; }
.schedule .qty {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  color: #fff; text-align: right; white-space: nowrap; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.schedule .qty .unit { font-size: 0.55em; color: var(--safety); font-weight: 700; }
.schedule tbody { padding-bottom: 1rem; }
.schedule .sch-pad { height: 1.2rem; }
@media (max-width: 640px) {
  .schedule th:nth-child(1), .schedule td.mark { display: none; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
/* overflow:hidden contains the absolutely-positioned .ghost stencil words,
   which are wider than the viewport by design */
.section { padding: clamp(4.5rem, 10vh, 7.5rem) 0; position: relative; overflow: hidden; }
.section-dark { background: var(--coal); color: var(--steel-text); }
.section-panel { background: var(--gunmetal); color: var(--steel-text); }
/* poured concrete sections with a diagonal plate seam on top */
.section-concrete {
  background: var(--concrete); color: var(--ink);
  clip-path: polygon(0 var(--seam), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(clamp(4.5rem, 10vh, 7.5rem) + var(--seam));
}
.section-concrete + .section-dark,
.section-concrete + .section-panel { margin-top: calc(var(--seam) * -1); padding-top: calc(clamp(4.5rem, 10vh, 7.5rem) + var(--seam)); clip-path: polygon(0 0, 100% var(--seam), 100% 100%, 0 100%); }
/* when concrete follows a dark/panel section, tuck it under so the clipped
   wedge reveals that section's own color, not the body coal */
.section-dark + .section-concrete,
.section-panel + .section-concrete { margin-top: calc(var(--seam) * -1); }

/* ghost stencil word per section - retired: one watermark (hero) is the brand,
   five was noise. Rule kept so markup stays valid. */
.ghost {
  display: none;
  position: absolute; right: -0.5%; top: 0.5rem; z-index: 0;
  font-family: var(--font-stencil); font-weight: 700;
  font-size: clamp(4.5rem, 13vw, 11rem); line-height: 1;
  text-transform: uppercase; white-space: nowrap;
  color: rgba(170, 180, 192, 0.05);
  user-select: none; pointer-events: none;
}
.section-concrete .ghost { color: rgba(22, 25, 29, 0.05); }

.section > .container { position: relative; z-index: 1; }
.section-head { max-width: 48rem; margin-bottom: clamp(2.2rem, 5vh, 3.5rem); }
.section-eyebrow {
  display: inline-flex; align-items: stretch;
  border: 0; margin-bottom: 1rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--steel-dim);
}
.section-eyebrow .sheet-no { display: none; }
.section-eyebrow .sheet-title { padding: 0; }
.section-concrete .section-eyebrow { border-color: #b9b6ae; color: var(--ink-muted); }
.section-panel .section-eyebrow { color: var(--steel-text); }
.section-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.95;
  color: #fff;
}
.section-concrete .section-title { color: var(--ink); }
.section-lede { color: var(--steel-dim); font-size: 1.05rem; margin-top: 1.1rem; max-width: 56ch; }
.section-concrete .section-lede { color: var(--ink-muted); }

/* ============================================================
   PRODUCT CARDS - self-drawing schematics
   ============================================================ */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; background: transparent; border: 0; }
/* gapped grids: each cell carries its own quiet border (was: 1px grid-line background) */
.card-grid > *, .division-grid > *, .process > *, .loc-grid > *, .prod-grid > * {
  border: 1px solid var(--steel-line);
}
@media (max-width: 980px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }

.card {
  position: relative; background: var(--coal); padding: 1.9rem;
  transition: background 0.25s;
}
.section-concrete .card { background: var(--concrete-2); }
.card:hover { background: var(--coal-2); }
.section-concrete .card:hover { background: #edebe5; }
.card::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--safety); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.card:hover::after { transform: scaleX(1); }
.card h3 {
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.55rem; color: #fff;
}
.section-concrete .card h3 { color: var(--ink); }
.card p { color: var(--steel-dim); font-size: 0.93rem; margin-bottom: 0; }
.section-concrete .card p { color: var(--ink-muted); }
.card .spec-tag {
  display: none; margin-bottom: 1rem;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em;
  color: var(--annotate); text-transform: uppercase;
}
.section-concrete .card .spec-tag { color: var(--annotate-deep); }

/* schematic block inside cards */
.schematic { height: 110px; margin-bottom: 1.2rem; color: var(--steel-text); }
.section-concrete .schematic { color: var(--ink-muted); }
.schematic svg { height: 100%; width: auto; display: block; overflow: visible; }
.schematic path, .schematic line, .schematic circle, .schematic rect, .schematic polyline {
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.schematic .hot { stroke: var(--safety); }
.schematic .note { stroke: var(--annotate); stroke-width: 1; }
.section-concrete .schematic .note { stroke: var(--annotate-deep); }
.schematic text { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; fill: var(--annotate); stroke: none; }
.section-concrete .schematic text { fill: var(--annotate-deep); }
/* draw-on-view + replay on hover (hidden state gated on html.js) */
.js .draw [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.draw.is-drawn [pathLength] { animation: draw-line 1.1s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 0.14s); }
.card:hover .draw.is-drawn [pathLength] { animation: none; stroke-dashoffset: 0; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }

/* bill-of-materials line - replaces the templated chip row */
.bom {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em;
  color: var(--ink-muted); border-top: 1px solid #b9b6ae;
  padding-top: 0.85rem; margin: 1.2rem 0 0; line-height: 1.7;
}
.bom b { font-weight: 600; color: var(--safety-deep); letter-spacing: 0.14em; }
.section-dark .bom, .section-panel .bom { color: var(--steel-dim); border-top-color: var(--steel-line); }
.section-dark .bom b, .section-panel .bom b { color: var(--safety); }

/* stencil headings (mill names, stamped-crate voice) */
.card h3.stencil { font-family: var(--font-stencil); letter-spacing: 0.1em; }

/* product band (big cards on interior pages) */
.product-band { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; background: transparent; border: 0; }
@media (max-width: 900px) { .product-band { grid-template-columns: 1fr; } }
.product-band--taxonomy {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 1100px) { .product-band--taxonomy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .product-band--taxonomy { grid-template-columns: 1fr; } }
.product-card { position: relative; background: var(--concrete-2); padding: 2rem; transition: background 0.25s; }
.product-card:hover { background: #edebe5; }
.product-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--safety); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.product-card:hover::after { transform: scaleX(1); }
.product-card h3 {
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 800;
  text-transform: uppercase; margin-bottom: 0.4rem; color: var(--ink);
}
.product-card .sub {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--safety-deep); margin-bottom: 1.1rem;
}
.product-card p { color: var(--ink-muted); font-size: 0.96rem; }
.product-card .schematic { color: var(--ink-muted); }
.product-links { margin: 0.8rem 0 0; }
.product-band--compact { gap: 0.8rem; }
.product-card--category {
  display: flex; flex-direction: column; gap: 0.8rem;
  min-height: 0; padding: 1.25rem;
  overflow: hidden;
}
.category-photo-link {
  display: block;
  margin: -1.25rem -1.25rem 0;
  background: #d8d4cc;
  overflow: hidden;
  text-decoration: none;
}
.category-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.35s var(--ease-out), filter 0.25s;
}
.product-card--category:hover .category-photo {
  transform: scale(1.035);
  filter: saturate(1.04) contrast(1.02);
}
.category-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.9rem;
}
.product-card--category h3 {
  font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 0.98;
  margin: 0;
}
.product-card--category .sub { margin: 0 0 0.35rem; }
.product-card--category .schematic {
  flex: 0 0 auto; width: 6.4rem; height: 4.8rem; margin: 0;
  display: flex; align-items: center; justify-content: center;
}
.product-band--taxonomy .product-card--category .schematic {
  display: none;
}
.product-card--category .schematic svg { max-width: 100%; }
.category-sublist {
  display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none;
  padding: 0; margin: 0;
}
.category-sublist a, .category-sublist span {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 0.36rem 0.55rem; border: 1px solid #b9b6ae;
  color: var(--ink); text-decoration: none; background: #efede7;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0;
}
.category-sublist a:hover { border-color: var(--ink); background: #fff; }
.brand-stack {
  display: flex; flex-wrap: wrap; gap: 0.38rem;
  list-style: none; padding: 0; margin: 0;
}
.brand-stack li {
  display: inline-flex; align-items: center;
  min-height: 30px; padding: 0.36rem 0.52rem;
  background: #fff; border: 1px solid #c4c0b7;
  color: var(--ink); font-family: var(--font-mono);
  font-size: 0.64rem; line-height: 1.12; letter-spacing: 0;
  text-transform: uppercase;
}
.category-proof {
  margin: auto 0 0; color: var(--ink-muted);
  font-size: 0.86rem; line-height: 1.45;
}
.category-resource {
  align-self: flex-start;
  color: var(--annotate-deep);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.2;
  text-decoration: underline;
  text-transform: uppercase;
  text-underline-offset: 0.14em;
}
.category-resource:hover { color: var(--safety-deep); }
.supplier-pdf-library {
  display: grid; gap: 0.72rem;
  padding: 0.82rem; background: #fff;
  border: 1px solid #c4c0b7;
}
.quote-product-active .supplier-pdf-library {
  margin: 0 0 1rem;
  padding: 1rem;
  background: #fffaf0;
  border: 2px solid var(--safety-deep);
}
.quote-product-active .supplier-pdf-library::before {
  content: "SUPPLIER DOCUMENTS";
  display: inline-flex; width: fit-content;
  padding: 0.18rem 0.38rem;
  background: var(--safety-deep); color: #fff;
  font-family: var(--font-mono); font-size: 0.64rem; line-height: 1.1;
  letter-spacing: 0; text-transform: uppercase;
}
.supplier-pdf-group {
  display: grid; gap: 0.34rem;
}
.supplier-pdf-group h4 {
  margin: 0;
  font-family: var(--font-mono); font-size: 0.66rem; line-height: 1.2;
  color: var(--ink); letter-spacing: 0; text-transform: uppercase;
}
.supplier-pdf-group ul {
  display: grid; gap: 0.28rem;
  list-style: none; padding: 0; margin: 0;
}
.supplier-pdf-group a {
  display: flex; align-items: flex-start; gap: 0.42rem;
  color: var(--ink-muted); text-decoration: none;
  font-size: 0.76rem; line-height: 1.25;
}
.supplier-pdf-group a::before {
  content: "PDF";
  flex: 0 0 auto; margin-top: 0.02rem;
  padding: 0.08rem 0.22rem;
  border: 1px solid #b9b6ae;
  color: var(--annotate-deep);
  font-family: var(--font-mono); font-size: 0.55rem; line-height: 1.1;
}
.supplier-pdf-group a[data-doc-type]::before { content: attr(data-doc-type); }
.supplier-pdf-group a:hover { color: var(--safety-deep); text-decoration: underline; text-underline-offset: 0.14em; }
.category-quote {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start; min-height: 40px; padding: 0.5rem 0.72rem;
  background: var(--ink); color: #fff; text-decoration: none;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0; text-transform: uppercase;
}
.category-quote:hover { background: #2b3138; }
@media (max-width: 520px) {
  .category-card-head { align-items: center; }
  .product-card--category .schematic { width: 5rem; height: 4rem; }
}

.size-guide, .quote-size-matrix, .quote-product-builder {
  margin-top: 1.2rem; padding: 1.6rem; background: #d8d4cc;
  border: 1px solid #b9b6ae;
}
.size-guide-head {
  display: grid; grid-template-columns: minmax(11rem, 0.75fr) minmax(0, 1.5fr);
  gap: 1rem; align-items: end; margin-bottom: 1rem;
}
.size-guide-head .section-eyebrow { margin: 0; }
.size-guide-head h3 {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 0.95; text-transform: uppercase; color: var(--ink); margin: 0;
}
.size-guide-head p {
  grid-column: 2; color: var(--ink-muted); margin: 0; max-width: 58ch;
}
.size-guide-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
.size-panel {
  background: var(--concrete-2); border: 1px solid #b9b6ae; padding: 1rem;
}
.size-panel h4 {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--safety-deep); margin: 0 0 0.8rem;
}
.size-table {
  width: 100%; border-collapse: collapse; color: var(--ink-muted);
  font-size: 0.9rem; line-height: 1.45;
}
.size-table th, .size-table td {
  padding: 0.55rem 0.4rem; text-align: left; vertical-align: top;
  border-top: 1px solid #c4c0b7;
}
.size-table thead th {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink);
}
.size-table tbody th {
  width: 4.4rem; color: var(--ink); font-family: var(--font-mono);
  letter-spacing: 0.02em; white-space: nowrap;
}
.quote-size-matrix, .quote-product-builder {
  margin-top: 1.4rem;
  min-width: 0;
  scroll-margin-top: 7rem;
}
.size-matrix-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #b9b6ae;
  background: #efede7;
}
.size-table--matrix {
  min-width: 920px;
  table-layout: fixed;
}
.size-table--treated { min-width: 620px; }
.size-table--matrix th, .size-table--matrix td {
  text-align: center;
  padding: 0.38rem 0.34rem;
}
.size-table--matrix thead th {
  background: var(--ink);
  color: #fff;
}
.size-table--matrix tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 4.8rem;
  background: var(--concrete-2);
  border-right: 1px solid #b9b6ae;
}
.size-qty-input {
  display: block;
  width: 100%;
  min-height: 2.25rem;
  padding: 0.22rem 0.32rem;
  background: #fff;
  border: 1px solid #c4c0b7;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.size-qty-input:focus {
  outline: 3px solid var(--safety);
  outline-offset: -1px;
  border-color: var(--safety-deep);
  background: #fff3e8;
}
.quote-matrix-summary { margin-top: 0.75rem; }
.quote-source-link { margin-top: 0.45rem; }
.quote-source-link a { color: var(--annotate-deep); }
.quote-reference-figure {
  max-width: 44rem;
  margin: 0.85rem 0 1rem;
  padding: 0.55rem;
  background: #efede7;
  border: 1px solid #b9b6ae;
}
.quote-reference-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #fff;
}
.quote-reference-figure figcaption {
  margin-top: 0.45rem;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
}
.quote-line-grid {
  display: grid;
  gap: 0.65rem;
}
.quote-line-row {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) 6.2rem minmax(12rem, 1.25fr);
  gap: 0.65rem;
  align-items: end;
  padding: 0.75rem;
  background: #efede7;
  border: 1px solid #b9b6ae;
}
.quote-line-row--structured {
  grid-template-columns: minmax(12rem, 1fr) minmax(6.5rem, 0.68fr) minmax(7.5rem, 0.78fr) minmax(6.8rem, 0.7fr) 5.5rem;
}
.quote-line-row--rimboard {
  grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) 5.5rem;
}
.quote-line-row--fields-1 {
  grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 0.9fr) 5.5rem;
}
.quote-line-row--fields-2 {
  grid-template-columns: minmax(12rem, 1fr) minmax(8rem, 0.72fr) minmax(8rem, 0.72fr) 5.5rem;
}
.quote-line-row--fields-3 {
  grid-template-columns: minmax(12rem, 1fr) minmax(6.5rem, 0.68fr) minmax(7.5rem, 0.78fr) minmax(6.8rem, 0.7fr) 5.5rem;
}
.quote-line-row--structured.quote-line-row--with-lf,
.quote-line-row--fields-3.quote-line-row--with-lf {
  grid-template-columns: minmax(12rem, 1fr) minmax(6.2rem, 0.58fr) minmax(6.9rem, 0.65fr) minmax(6.4rem, 0.6fr) 5.2rem 6.6rem;
}
.quote-line-row--fields-1.quote-line-row--with-lf {
  grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 0.9fr) 5.2rem 6.6rem;
}
.quote-line-row--fields-2.quote-line-row--with-lf {
  grid-template-columns: minmax(12rem, 1fr) minmax(8rem, 0.72fr) minmax(8rem, 0.72fr) 5.2rem 6.6rem;
}
.quote-line-row--rimboard-lf {
  grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) 5.2rem 6.6rem;
}
.quote-line-row--fields-1-detail {
  grid-template-columns: minmax(12rem, 1fr) minmax(8rem, 0.72fr) minmax(12rem, 1fr) 5.5rem;
}
.quote-line-row--fields-2-detail {
  grid-template-columns: minmax(12rem, 1fr) minmax(7rem, 0.65fr) minmax(7rem, 0.65fr) minmax(11rem, 0.95fr) 5.5rem;
}
.quote-line-row--fields-3-detail {
  grid-template-columns: minmax(12rem, 1fr) minmax(6rem, 0.6fr) minmax(6rem, 0.6fr) minmax(6rem, 0.6fr) minmax(10rem, 0.9fr) 5.5rem;
}
.quote-line-row--qty-only {
  grid-template-columns: minmax(12rem, 1fr) 5.5rem;
}
.quote-line-name {
  display: grid;
  gap: 0.18rem;
  color: var(--ink);
}
.quote-line-name span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.quote-line-name strong {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.2;
}
.quote-line-name small {
  color: var(--ink-muted);
  line-height: 1.35;
}
.quote-line-name em {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1.35;
  color: var(--ink-muted);
}
.quote-line-row label { margin: 0; }
.quote-line-row .field-label { font-size: 0.62rem; }
.quote-line-input {
  width: 100%;
  min-height: 2.45rem;
  padding: 0.28rem 0.5rem;
  background: #fff;
  border: 1px solid #c4c0b7;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.quote-line-input:focus {
  outline: 3px solid var(--safety);
  outline-offset: -1px;
  border-color: var(--safety-deep);
  background: #fff3e8;
}
.quote-line-output {
  display: flex;
  align-items: center;
  min-height: 2.45rem;
  padding: 0.28rem 0.5rem;
  background: #f8f7f3;
  border: 1px solid #c4c0b7;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.engineered-additional {
  margin-top: 0.8rem;
  background: #efede7;
  border: 1px solid #b9b6ae;
}
.engineered-additional-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-bottom: 1px solid #b9b6ae;
}
.engineered-additional-head h4,
.product-list-head h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 0.95;
  text-transform: uppercase;
}
.engineered-additional-add {
  flex: 0 0 auto;
}
.engineered-additional-wrap {
  overflow-x: auto;
}
.engineered-additional-table,
.product-list-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  table-layout: fixed;
}
.engineered-additional-table th,
.engineered-additional-table td,
.product-list-table th,
.product-list-table td {
  padding: 0.4rem;
  border-top: 1px solid #c4c0b7;
  border-right: 1px solid #d4d0c7;
  vertical-align: middle;
}
.engineered-additional-table tr:first-child td,
.product-list-table tr:first-child td {
  border-top: 0;
}
.engineered-additional-table th,
.product-list-table th {
  background: #123f37;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
}
.engineered-additional-table th:nth-child(5),
.engineered-additional-table th:nth-child(6),
.engineered-additional-table th:nth-child(8),
.engineered-additional-table td:nth-child(5),
.engineered-additional-table td:nth-child(6),
.engineered-additional-table td:nth-child(8),
.product-list-table th:nth-child(5),
.product-list-table th:nth-child(6),
.product-list-table th:nth-child(8),
.product-list-table td:nth-child(5),
.product-list-table td:nth-child(6),
.product-list-table td:nth-child(8) {
  width: 6.2rem;
}
.engineered-additional-table th:nth-child(7),
.engineered-additional-table td:nth-child(7),
.product-list-table th:nth-child(7),
.product-list-table td:nth-child(7) {
  width: 12rem;
}
.engineered-additional-table th:last-child,
.engineered-additional-table td:last-child,
.product-list-table th:last-child,
.product-list-table td:last-child {
  border-right: 0;
}
.engineered-additional-input {
  width: 100%;
  min-height: 2.35rem;
  padding: 0.28rem 0.45rem;
  background: #fff;
  border: 1px solid #c4c0b7;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}
.engineered-additional-input:focus {
  outline: 3px solid var(--safety);
  outline-offset: -1px;
  border-color: var(--safety-deep);
}
.engineered-additional-empty {
  background: #f8f7f3;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-align: center;
}
.engineered-additional-lf {
  display: flex;
  align-items: center;
  min-height: 2.35rem;
  padding: 0.28rem 0.45rem;
  background: #f8f7f3;
  border: 1px solid #d4d0c7;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}
.product-list-builder {
  min-width: 0;
  margin-top: 0.4rem;
  background: #efede7;
  border: 1px solid #b9b6ae;
}
.product-list-head > div {
  display: grid;
  gap: 0.18rem;
}
.product-list-head .field-note {
  display: block;
  margin: 0;
  max-width: 58rem;
}
.product-list-table th:first-child,
.product-list-table td:first-child {
  width: 15rem;
}
.product-list-table th:nth-child(2),
.product-list-table th:nth-child(3),
.product-list-table th:nth-child(4),
.product-list-table td:nth-child(2),
.product-list-table td:nth-child(3),
.product-list-table td:nth-child(4) {
  width: 8.8rem;
}
@media (max-width: 780px) {
  .size-guide, .quote-size-matrix, .quote-product-builder { padding: 1.1rem; }
  .size-guide-head { grid-template-columns: 1fr; align-items: start; }
  .size-guide-head p { grid-column: 1; }
  .size-guide-grid { grid-template-columns: 1fr; }
  .size-table--matrix { min-width: 760px; }
  .size-table--treated { min-width: 520px; }
  .quote-size-matrix, .quote-product-builder { scroll-margin-top: 11rem; }
  .quote-line-row { grid-template-columns: 1fr; }
}

/* ============================================================
   FABRICATION LINE (services) - stations on a conveyor
   ============================================================ */
.fab-line { position: relative; margin-top: 1rem; }
.fab-line svg { width: 100%; height: auto; display: block; overflow: visible; }
.fab-line .conveyor { stroke: var(--smoke); stroke-width: 2; stroke-dasharray: 8 8; }
.play-line .conveyor { animation: convey 1.2s linear infinite; }
@keyframes convey { to { stroke-dashoffset: -16; } }
@media (max-width: 640px) { .fab-line { display: none; } } /* the process steps below carry the same content */
.fab-line .station { fill: none; stroke: var(--steel-text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fab-line .station-hot { stroke: var(--safety); }
.fab-line text { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; fill: var(--steel-dim); text-transform: uppercase; }
.fab-line .st-label { fill: #fff; font-size: 11px; }

/* process steps (kept for services detail) */
.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; background: transparent; border: 0; counter-reset: step; }
@media (max-width: 900px) { .process { grid-template-columns: 1fr; } }
.process-step { position: relative; padding: 1.8rem 1.6rem; background: var(--coal); }
.process-step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0;
  color: var(--steel-dim); display: block; margin-bottom: 0.6rem;
}
.process-step h3 { font-family: var(--font-display); font-size: 1.45rem; text-transform: uppercase; color: #fff; margin-bottom: 0.5rem; }
.process-step p { color: var(--steel-dim); font-size: 0.94rem; margin: 0; }

/* ============================================================
   MARQUEE - stencil-stamped crate band
   ============================================================ */
.marquee-section {
  background: var(--coal-2);
  border-block: 1px solid var(--steel-line);
  padding: 1.4rem 0; overflow: hidden; position: relative;
}
.marquee { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee-dup { display: contents; }
.marquee span {
  font-family: var(--font-stencil); font-size: 1.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--steel-dim);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 4rem;
  padding-right: 4rem; /* spacing inside each item keeps translateX(-50%) seamless */
  transition: color 0.3s;
}
.marquee span::after { content: "◆"; color: var(--safety); font-size: 0.65rem; }
.marquee span:hover { color: var(--steel-text); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   LOCATIONS - Texas plot + yard cards
   ============================================================ */
.tx-wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 960px) { .tx-wrap { grid-template-columns: 1fr; } }
.tx-map svg { width: 100%; height: auto; display: block; overflow: visible; }
.tx-outline { fill: var(--coal-2); stroke: var(--smoke); stroke-width: 1.5; stroke-linejoin: round; }
.section-concrete .tx-outline { fill: #cecbc4; stroke: var(--control-line); }
.tx-yard { cursor: pointer; }
.tx-yard circle.dot { fill: var(--safety); stroke: none; }
.tx-yard circle.pulse { fill: none; stroke: var(--safety); stroke-width: 1.5; opacity: 0.7; transform-box: fill-box; transform-origin: center; animation: yard-pulse 2.4s ease-out infinite; }
.tx-yard:nth-of-type(2) circle.pulse { animation-delay: 0.6s; }
.tx-yard:nth-of-type(3) circle.pulse { animation-delay: 1.2s; }
.tx-yard:nth-of-type(4) circle.pulse { animation-delay: 1.8s; }
@keyframes yard-pulse {
  0% { transform: scale(0.4); opacity: 0.8; }
  100% { transform: scale(2.6); opacity: 0; }
}
.tx-yard text { font-family: var(--font-mono); font-size: 5.5px; letter-spacing: 0.12em; fill: var(--steel-text); text-transform: uppercase; }
.section-concrete .tx-yard text { fill: var(--ink-muted); }
.tx-yard:hover text { fill: var(--safety); }

.loc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; background: transparent; border: 0; }
@media (max-width: 620px) { .loc-grid { grid-template-columns: 1fr; } }
.loc-card { background: var(--concrete-2); display: flex; flex-direction: column; transition: background 0.25s; }
.section-dark .loc-card, .section-panel .loc-card { background: var(--coal); }
.loc-card:hover { background: #edebe5; }
.section-dark .loc-card:hover, .section-panel .loc-card:hover { background: var(--coal-2); }
.loc-banner {
  padding: 0.9rem 1.4rem; background: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 3px solid var(--safety);
}
.loc-banner h3 {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 800;
  color: #fff; text-transform: uppercase; letter-spacing: 0.05em;
}
.loc-banner .loc-code { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--annotate); }
.loc-body { padding: 1.3rem 1.4rem 1.5rem; font-size: 0.92rem; flex: 1; display: flex; flex-direction: column; gap: 0.65rem; }
.loc-line { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--ink-muted); margin: 0; }
.section-dark .loc-line, .section-panel .loc-line { color: var(--steel-dim); }
.loc-line svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 0.2rem; color: var(--safety-deep); }
.section-dark .loc-line svg, .section-panel .loc-line svg { color: var(--safety); }
.loc-line a { color: var(--ink); text-decoration: none; font-weight: 500; }
.section-dark .loc-line a, .section-panel .loc-line a { color: var(--steel-text); }
.loc-line a:hover { color: var(--safety-deep); }
.section-dark .loc-line a:hover, .section-panel .loc-line a:hover { color: var(--safety); }

/* ============================================================
   CTA - stamped work order
   ============================================================ */
.cta-panel {
  position: relative; border: 1px solid var(--smoke);
  background: var(--coal-2);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center; color: #fff;
}
.cta-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--safety);
}
.cta-panel h2 {
  font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 800; text-transform: uppercase; margin-bottom: 1rem;
}
.cta-panel p { color: var(--steel-dim); max-width: 46ch; margin: 0 auto 2rem; }
.cta-panel .hero-actions { justify-content: center; }
.cta-stamp {
  position: absolute; right: clamp(0.5rem, 4vw, 3rem); top: -1.1rem;
  font-family: var(--font-stencil); font-size: 1rem; letter-spacing: 0.3em;
  color: var(--safety); border: 2px solid var(--safety);
  padding: 0.35rem 0.9rem; transform: rotate(-4deg);
  text-transform: uppercase; background: var(--coal);
}

/* ============================================================
   FOOTER - drawing title block
   ============================================================ */
.site-footer {
  background: var(--coal); color: var(--steel-dim);
  border-top: 1px solid var(--steel-line);
  font-size: 0.9rem; padding: 0 0 2rem;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr;
  border-inline: 1px solid var(--steel-line);
  border-bottom: 1px solid var(--steel-line);
}
.footer-grid > div { padding: 2rem 1.6rem; border-right: 1px solid var(--steel-line); }
.footer-grid > div:last-child { border-right: 0; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:nth-child(2n) { border-right: 0; } .footer-grid > div { border-bottom: 1px solid var(--steel-line); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-grid > div { border-right: 0; } }
.footer-grid h2 {
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--annotate);
  margin: 0 0 1.1rem; line-height: 1.4;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-grid a { color: var(--steel-dim); text-decoration: none; transition: color 0.2s; }
.footer-grid a:hover { color: #fff; }
.footer-blurb { max-width: 34ch; margin-top: 1rem; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: space-between;
  padding: 1.2rem 1.6rem; border-inline: 1px solid var(--steel-line); border-bottom: 1px solid var(--steel-line);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--steel-dim);
}
.footer-bottom a { color: var(--steel-text); text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-hero {
  background: var(--coal); color: #fff;
  padding: clamp(8rem, 14vh, 10rem) 0 clamp(2.5rem, 6vh, 4rem);
  position: relative; overflow: hidden;
}
.legal-hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 6.5vw, 4.6rem); text-transform: uppercase;
}
.legal-hero .updated {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--annotate); margin-top: 1rem;
}
.legal-wrap { background: var(--concrete); }
.legal-body { max-width: 46rem; padding: clamp(3rem, 7vh, 5rem) 0 clamp(4rem, 8vh, 6rem); color: var(--ink); }
.legal-body h2 {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink);
  margin: 2.4rem 0 0.8rem; padding-top: 1.6rem; border-top: 1px solid #b9b6ae;
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body p, .legal-body li { color: #333942; font-size: 1rem; }
.legal-body .q-sku { font-size: 0.875rem; line-height: 1.6; }
.legal-body a { color: var(--safety-deep); font-weight: 500; }
.legal-callout {
  background: #efede7; border: 1px solid #b9b6ae; border-left: 4px solid var(--safety);
  padding: 1.1rem 1.4rem; margin: 1.4rem 0; font-size: 0.96rem;
}
.legal-callout strong { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* ============================================================
   PAGE HERO (interior pages)
   ============================================================ */
.page-hero {
  background: var(--coal); color: #fff;
  padding: clamp(8.5rem, 15vh, 11rem) 0 clamp(3rem, 7vh, 5rem);
  position: relative; overflow: hidden;
}
.page-hero .ghost-word {
  position: absolute; top: 18%; right: -1%;
  font-family: var(--font-stencil); font-weight: 700;
  font-size: clamp(6rem, 18vw, 15rem); line-height: 0.9;
  text-transform: uppercase; color: rgba(170, 180, 192, 0.045);
  user-select: none; pointer-events: none; white-space: nowrap;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 8vw, 5.8rem); text-transform: uppercase;
  max-width: 16ch; line-height: 0.92;
}
.page-hero .lede { color: var(--steel-dim); max-width: 56ch; font-size: 1.08rem; margin-top: 1.4rem; }
.product-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.82fr);
  gap: clamp(2rem, 5vw, 4.6rem);
  align-items: center;
}
.brand-lede-strip {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  max-width: 48rem; margin-top: 1.35rem;
}
.brand-lede-strip span {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: 0.38rem 0.55rem;
  border: 1px solid rgba(170, 180, 192, 0.35);
  background: rgba(255, 255, 255, 0.07);
  color: #fff; font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0;
  text-transform: uppercase;
}
.product-hero-media {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  min-width: 0;
}
.product-hero-shot {
  position: relative; min-width: 0; overflow: hidden;
  margin: 0; border: 1px solid rgba(170, 180, 192, 0.32);
  background: #20242a;
}
.product-hero-shot--large { grid-row: auto; }
.product-hero-shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
}
.product-hero-shot--large img { aspect-ratio: 3 / 2; }
.product-hero-shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.48rem 0.58rem;
  background: linear-gradient(to top, rgba(16, 18, 21, 0.88), rgba(16, 18, 21, 0));
  color: #fff; font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0;
  text-transform: uppercase;
}
@media (max-width: 980px) {
  .product-hero-grid { grid-template-columns: 1fr; align-items: start; }
  .product-hero-media { max-width: 44rem; }
}
@media (max-width: 560px) {
  .page-hero--products { padding-top: 2rem; }
  .product-hero-grid { gap: 1.35rem; }
  .product-hero-grid > div:first-child { order: 1; }
  .product-hero-media {
    order: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
    max-width: 100%;
  }
  .page-hero--products .brand-lede-strip { display: none; }
  .page-hero--products .product-hero-shot:nth-of-type(n+5) { display: none; }
  .product-hero-shot--large {
    grid-row: auto;
    grid-column: auto;
  }
  .product-hero-shot--large img,
  .product-hero-shot img { aspect-ratio: 3 / 2; }
}

/* rebar divider - thin tie-wire band */
.rebar-divider {
  height: 1px;
  background: var(--steel-line);
}

/* ---------- mobile action bar ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
  display: none; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: rgba(16, 18, 21, 0.97);
  border-top: 1px solid var(--steel-line);
  padding: 0.45rem 0.6rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
  gap: 0.4rem;
}
.mobile-bar a {
  display: flex; flex-direction: column; align-items: center; gap: 0.22rem;
  padding: 0.45rem 0.2rem; min-height: 48px;
  color: var(--steel-text); text-decoration: none;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.mobile-bar a:active { background: rgba(255, 255, 255, 0.06); }
.mobile-bar svg { width: 20px; height: 20px; }
.mobile-bar .bar-cta { background: var(--safety); color: #101215; }
@media (max-width: 1255px) {
  .mobile-bar { display: grid; }
  body { padding-bottom: 72px; }
}

/* ---------- scroll reveal (hidden state gated on html.js) ---------- */
.reveal { transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); }
.js .reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee { animation: none; flex-wrap: wrap; width: auto; }
  .marquee-dup { display: none; }
  .tx-yard circle.pulse { animation: none; opacity: 0; }
  .draw [pathLength], .wall [pathLength] { stroke-dashoffset: 0 !important; animation: none !important; }
  /* land the hero on its finished drawing */
  .hero h1 .stamp-line > span { animation: none !important; transform: none !important; }
  .hero-sub, .hero .hero-actions, .loc-chips { animation: none !important; opacity: 1 !important; transform: none !important; }
  .play .dim, .play .dim-label { animation: none; opacity: 1; }
  .fab-line .conveyor { animation: none !important; }
}

/* ============================================================
   CATALOG & QUOTE LIST
   ============================================================ */
.cat-toolbar {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.8rem; margin-bottom: 1.4rem;
}
@media (max-width: 760px) { .cat-toolbar { grid-template-columns: 1fr; } }
.field-label {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.35rem; display: block;
}
legend.field-label { padding: 0; }
.cat-input, .cat-select {
  width: 100%; min-height: 48px; padding: 0.65rem 0.9rem;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--concrete-2); border: 1px solid var(--control-line); border-radius: 0;
}
.cat-input:focus, .cat-select:focus { outline: 3px solid var(--safety); outline-offset: 1px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.4rem; }
.cat-chip {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em;
  padding: 0.45rem 0.85rem; border: 1px solid var(--control-line); background: transparent;
  color: var(--ink-muted); cursor: pointer; min-height: 36px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cat-chip:hover { border-color: var(--ink); color: var(--ink); }
.cat-chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.cat-count {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em;
  color: var(--ink-muted); margin: 0 0 1rem;
}

.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; background: transparent; border: 0; }
@media (max-width: 980px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .prod-grid { grid-template-columns: 1fr; } }
.prod-card {
  background: var(--concrete-2); padding: 1.15rem 1.2rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.45rem; position: relative;
  transition: background 0.2s; text-align: left;
}
.prod-card:hover { background: #edebe5; }
.prod-card .p-sku {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em;
  color: var(--annotate-deep); text-transform: uppercase;
}
.prod-card .p-name { font-weight: 600; font-size: 0.95rem; line-height: 1.35; color: var(--ink); }
.prod-card .p-name button {
  all: unset; cursor: pointer; font: inherit; color: inherit;
}
.prod-card .p-name button:hover { color: var(--safety-deep); }
.prod-card .p-name button:focus-visible { outline: 3px solid var(--safety); outline-offset: 2px; }
.prod-card .p-cat { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--ink-muted); text-transform: uppercase; }
.prod-card .p-price-row { display: flex; align-items: baseline; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; flex-wrap: wrap; }
.prod-card .p-price { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.prod-card .p-price-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.prod-card .p-actions { display: flex; gap: 0.7rem; align-items: center; }
.btn-add {
  flex: 1; min-height: 44px; padding: 0.5rem 0.8rem; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--ink); color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: background 0.15s, transform 0.15s var(--ease-stamp);
}
.btn-add:hover { background: #2b3138; }
.btn-add:active { transform: translateY(1px); }
.btn-add.is-added { background: var(--safety); color: #101215; }
.p-contact {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em;
  color: var(--safety-deep); text-decoration: none; text-transform: uppercase;
  white-space: nowrap;
}
.p-contact:hover { text-decoration: underline; }

/* pagination */
.pager { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 1.8rem; }
.pager button {
  min-width: 44px; min-height: 44px; padding: 0.4rem 0.7rem; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.8rem;
  background: transparent; border: 1px solid var(--control-line); color: var(--ink-muted);
}
.pager button:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.pager button.is-current { background: var(--safety); border-color: var(--safety); color: #101215; font-weight: 600; }
.pager button:disabled { opacity: 0.35; cursor: default; }

/* product modal */
.prod-modal { border: 0; padding: 0; }
.prod-modal[open] {
  border: 1px solid var(--smoke); background: var(--concrete-2); color: var(--ink);
  width: min(34rem, calc(100vw - 2rem));
}
.prod-modal::backdrop { background: rgba(12, 14, 17, 0.6); }
.prod-modal .pm-head {
  background: var(--ink); color: #fff; padding: 1rem 1.3rem;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  border-bottom: 3px solid var(--safety);
}
.prod-modal .pm-head h3 { font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase; line-height: 1.15; margin: 0; }
.prod-modal .pm-close {
  background: none; border: 1px solid var(--steel-line); color: #fff;
  width: 40px; height: 40px; cursor: pointer; font-size: 1.1rem; flex-shrink: 0;
}
.prod-modal .pm-body { padding: 1.3rem; }
.prod-modal dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.2rem; margin: 0 0 1rem; font-size: 0.92rem; }
.prod-modal dt { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); align-self: center; }
.prod-modal dd { margin: 0; }
.prod-modal .pm-price { font-family: var(--font-display); font-weight: 800; font-size: 2rem; }
.pm-qty-row { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.4rem; flex-wrap: wrap; }
.qty-input {
  width: 5rem; min-height: 44px; text-align: center; font-family: var(--font-mono);
  font-size: 1rem; border: 1px solid var(--control-line); background: #fff; color: var(--ink);
}
.pm-note { font-size: 0.8rem; color: var(--ink-muted); margin-top: 0.9rem; }

/* quote list page */
#quote-intake { padding-bottom: 2rem; }
#quote-intake .quote-form-grid { margin-bottom: 0; }
.section.quote-more-materials { padding-top: 2rem; }
.quote-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem 1rem; margin-bottom: 1.6rem; }
@media (max-width: 700px) { .quote-form-grid { grid-template-columns: 1fr; } }
.quote-form-grid .full { grid-column: 1 / -1; }
.quote-customer-details {
  min-width: 0;
  margin: 0 0 0.6rem;
  padding: 1rem 1.25rem 1.25rem;
  border: 1px solid var(--control-line);
  background: #ffffff;
}
.quote-customer-details legend {
  padding-inline: 0.4rem;
  color: var(--brand-ink);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}
.quote-customer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1rem;
}
.quote-customer-grid label { min-width: 0; }
.quote-customer-grid .field-note { margin: 0; }
@media (max-width: 700px) {
  .quote-customer-grid { grid-template-columns: minmax(0, 1fr); }
  .quote-customer-details { padding-inline: 1rem; }
}
.quote-textarea {
  min-height: 10rem;
  resize: vertical;
  line-height: 1.45;
}
.quote-file {
  height: auto;
  min-height: 48px;
  padding: 0.72rem;
}
.quote-file::file-selector-button {
  min-height: 38px;
  margin-right: 0.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.74rem;
}
#qPhotoList {
  max-width: 72ch;
  overflow-wrap: anywhere;
}
.quote-checkout-list {
  position: fixed;
  top: clamp(6rem, 12vh, 8rem);
  right: 0;
  bottom: 1.25rem;
  z-index: 220;
  width: min(430px, calc(100vw - 1rem));
  margin: 0;
  border: 1px solid var(--control-line);
  border-right: 0;
  background: #f5f3ee;
  box-shadow: 0 22px 52px rgba(16, 18, 21, 0.24);
  padding: 0;
  transform: translateX(calc(100% - 54px));
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
  overflow: visible;
}
.quote-checkout-list:hover,
.quote-checkout-list:focus-within,
.quote-checkout-list.is-open {
  transform: translateX(0);
}
.quote-rail-tab {
  position: absolute;
  inset: 0 auto 0 0;
  width: 54px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-direction: column;
}
.quote-rail-tab:focus-visible {
  outline: 3px solid var(--safety);
  outline-offset: -4px;
}
.quote-rail-word {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.quote-rail-count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.8rem;
  min-height: 1.8rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: var(--safety);
  color: #101215;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.quote-rail-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: 54px;
  padding: 0.95rem 0.95rem 1rem;
  overflow: auto;
}
.quote-rail-head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--control-line);
}
.quote-rail-head h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
}
.quote-rail-line-count {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  white-space: nowrap;
}
.quote-rail-scroll {
  flex: 1 1 auto;
  min-height: 5rem;
  overflow: auto;
  padding-right: 0.1rem;
}
.qt-wrap { overflow-x: auto; }
.quote-rail.qt-wrap { overflow: visible; }
.quote-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 560px; }
.quote-checkout-table { min-width: 640px; }
.quote-rail .quote-checkout-table {
  min-width: 0;
  table-layout: fixed;
}
.quote-rail .quote-checkout-table th:nth-child(2),
.quote-rail .quote-checkout-table td:nth-child(2) {
  display: none;
}
.quote-table th {
  text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: 0.64rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted);
  border-bottom: 1px solid var(--control-line); padding: 0.5rem 0.8rem 0.5rem 0;
}
.quote-table td { border-bottom: 1px solid #c6c3bb; padding: 0.8rem 0.8rem 0.8rem 0; vertical-align: middle; }
.quote-rail .quote-table th,
.quote-rail .quote-table td {
  padding: 0.62rem 0.46rem 0.62rem 0;
}
.quote-table tr:last-child td { border-bottom: 0; }
.quote-table .q-name { font-weight: 600; }
.quote-table .q-sku { font-family: var(--font-mono); font-size: 0.68rem; color: var(--annotate-deep); overflow-wrap: anywhere; }
.quote-table .q-uom { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-muted); }
.quote-table .q-price, .quote-table .q-line { font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote-checkout-table td[data-checkout-cell="qty"] { width: 190px; }
.quote-checkout-table td[data-checkout-cell="remove"] { width: 112px; text-align: right; }
.quote-rail .quote-checkout-table td[data-checkout-cell="qty"] { width: 128px; }
.quote-rail .quote-checkout-table td[data-checkout-cell="remove"] { width: 74px; }
.q-static-qty { font-family: var(--font-mono); font-weight: 700; }
.q-qty-cell { display: flex; align-items: center; gap: 0.4rem; }
.quote-rail .q-qty-cell { gap: 0.24rem; }
.qty-btn {
  width: 38px; height: 38px; border: 1px solid var(--control-line); background: transparent;
  cursor: pointer; font-size: 1rem; color: var(--ink);
}
.quote-rail .qty-btn { width: 34px; height: 34px; }
.quote-rail .qty-input { width: 3.35rem; min-height: 34px; }
.qty-btn:hover { border-color: var(--ink); }
.q-remove { background: none; border: 0; cursor: pointer; color: var(--safety-deep); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; min-height: 38px; }
.quote-rail .q-remove { font-size: 0.6rem; min-height: 34px; }
.q-remove:hover { text-decoration: underline; }
.quote-rail-actions {
  flex: 0 0 auto;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--control-line);
}
.quote-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.quote-rail-actions .btn {
  min-width: 0;
  min-height: 44px;
  padding: 0.65rem 0.35rem;
  gap: 0.35rem;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}
.quote-tools { margin-top: 0.5rem; }
.quote-tool {
  min-width: 0;
  min-height: 44px;
  padding: 0.4rem 0.2rem;
  border: 1px solid var(--control-line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.quote-tool:hover { background: var(--brand-mint); }
.quote-tool:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.quote-rail-actions .q-remove { width: 100%; min-height: 44px; font-size: 0.75rem; }
.quote-rail .quote-details-link {
  display: block;
  padding: 0.4rem 0;
  color: #174f2d;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#quotePrintSheet { display: none; }
@media print {
  body.quote-print-only > :not(#quotePrintSheet) { display: none !important; }
  body.quote-print-only #quotePrintSheet {
    display: block !important;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0;
    color: #000;
    background: #fff;
    font: 10pt/1.5 monospace;
  }
}
.quote-empty { text-align: center; padding: 3rem 1rem; color: var(--ink-muted); }
.quote-disclaimer {
  font-size: 0.8125rem; line-height: 1.45; color: var(--ink-muted); margin: 0.3rem 0 0;
}

@media (max-width: 760px) {
  .quote-checkout-list {
    top: auto;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 70px;
    width: auto;
    height: min(70vh, 34rem);
    height: min(70dvh, 34rem);
    max-height: min(70vh, 34rem);
    border: 1px solid var(--control-line);
    transform: translateY(calc(100% - 58px));
  }
  .quote-checkout-list:hover,
  .quote-checkout-list:focus-within,
  .quote-checkout-list.is-open {
    transform: translateY(0);
  }
  .quote-rail-tab {
    inset: 0 0 auto 0;
    width: 100%;
    height: 58px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    flex-direction: row;
  }
  .quote-rail-word {
    writing-mode: horizontal-tb;
    transform: none;
  }
  .quote-rail-panel {
    margin-left: 0;
    padding: 4.25rem 0.72rem 0.8rem;
  }
  .quote-rail .quote-table th,
  .quote-rail .quote-table td {
    padding-block: 0.55rem;
  }
  .quote-rail .quote-checkout-table td[data-checkout-cell="qty"] { width: 120px; }
  .quote-rail .quote-checkout-table td[data-checkout-cell="remove"] { width: 66px; }
  .quote-rail .qty-btn { width: 32px; height: 32px; }
  .quote-rail .qty-input { width: 3rem; min-height: 32px; padding-inline: 0.2rem; }
}

/* contractor order sheet */
.order-form { display: grid; gap: 1rem; }
.order-summary {
  position: sticky; top: 5.6rem; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--concrete-2); border: 2px solid var(--ink);
  border-left: 8px solid var(--safety); padding: 0.8rem 0.9rem;
  box-shadow: 0 10px 26px rgba(16, 18, 21, 0.16);
}
.order-summary-count {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 800;
  line-height: 1; text-transform: uppercase; color: var(--ink);
}
.order-summary-count span { font-variant-numeric: tabular-nums; }
.order-summary-count small {
  display: block; margin-top: 0.32rem;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.12em; color: var(--ink-muted);
}
.order-summary-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.55rem; flex-wrap: wrap; }
.order-summary-actions .btn { min-height: 44px; padding: 0.72rem 1rem; font-size: 0.95rem; }
.order-contact-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.5rem 0.74rem; border: 1px solid var(--control-line);
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: transparent;
}
.order-contact-link:hover { border-color: var(--ink); background: #efede7; }
.order-js-only { display: none; }
.js .order-js-only { display: inline-flex; }
/* sits at the top of the form, styled like the catalog toolbar */
.order-search { width: 100%; align-items: flex-end; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.order-search label { flex: 1 1 18rem; max-width: 34rem; display: block; }
.order-search-count {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em;
  color: var(--ink-muted); white-space: nowrap; padding-bottom: 0.95rem;
}
.order-help, .order-status {
  margin: 0; color: var(--ink-muted); font-size: 0.86rem; max-width: 70ch;
}
.order-status { min-height: 1.4em; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; }
.order-tables { display: grid; gap: 1.1rem; }
.order-group { margin: 0; }
.order-table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  background: var(--concrete-2); border: 1px solid var(--control-line);
}
.order-table col.order-wt-col { width: 5rem; }
.order-table col.order-qty-col { width: 10.4rem; }
.order-table caption {
  caption-side: top; text-align: left; padding: 0.66rem 0.8rem;
  background: var(--ink); color: #fff; border-bottom: 3px solid var(--safety);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.order-table th, .order-table td {
  border-bottom: 1px solid #c6c3bb; padding: 0.48rem 0.55rem;
  vertical-align: middle; text-align: left;
}
.order-table thead th {
  background: #efede7; color: var(--ink-muted);
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.order-table tbody tr:last-child th, .order-table tbody tr:last-child td { border-bottom: 0; }
.order-product {
  display: inline; font-weight: 600; font-size: 0.9rem; line-height: 1.25;
  overflow-wrap: anywhere;
}
.order-wt {
  font-family: var(--font-mono); font-size: 0.86rem; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.order-qty { width: 9.5rem; }
.order-stepper { display: flex; align-items: center; gap: 0.28rem; justify-content: flex-end; }
.order-step { display: none; }
.js .order-step { display: inline-grid; place-items: center; }
.order-stepper .qty-btn {
  width: 44px; height: 44px; flex: 0 0 44px; background: #fff;
}
.order-stepper .qty-input {
  width: 44px; min-width: 44px; height: 44px; flex: 0 0 44px;
}
.spec-check {
  display: inline-block; margin-left: 0.45rem; padding: 0.1rem 0.36rem;
  background: var(--safety); color: #101215;
  font-family: var(--font-mono); font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; vertical-align: 0.08em;
}

@media (max-width: 700px) {
  .order-summary { top: 4.9rem; align-items: stretch; flex-direction: column; }
  .order-summary-actions { justify-content: flex-start; }
  .order-table col.order-wt-col { width: 4.25rem; }
  .order-table col.order-qty-col { width: 9.4rem; }
  .order-table th, .order-table td { padding: 0.45rem 0.38rem; }
  .order-product { font-size: 0.82rem; line-height: 1.22; }
  .order-wt { font-size: 0.78rem; }
  .order-stepper { gap: 0.16rem; }
  .order-stepper .qty-btn { width: 44px; height: 44px; flex-basis: 44px; }
  .order-stepper .qty-input { width: 44px; flex-basis: 44px; padding-inline: 0.25rem; }
}

/* nav quote badge */
.nav-cta .q-badge {
  display: inline-block; min-width: 1.5em; padding: 0.05em 0.35em; margin-left: 0.45em;
  background: #101215; color: #fff; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.72em; text-align: center;
}
.mobile-bar .q-badge {
  position: absolute; top: 2px; right: 10%;
  min-width: 1.5em; padding: 0.05em 0.3em;
  background: var(--safety); color: #101215; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.62rem; text-align: center; font-weight: 600;
}
.mobile-bar a { position: relative; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 0.7rem 1.2rem; z-index: 240;
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.05em;
  border-left: 4px solid var(--safety); opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  max-width: calc(100vw - 2rem);
}
.toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ============================================================
   PROCEDURAL PRODUCT MODELS
   Geometry is generated from each product's own description,
   projected and flat-shaded as SVG. No image files anywhere.
   ============================================================ */
.p-model {
  display: block; width: 100%; padding: 0; margin: 0 0 0.15rem;
  background:
    radial-gradient(ellipse 62% 46% at 50% 78%, rgba(22, 25, 29, 0.16), transparent 70%),
    linear-gradient(170deg, #f0eee8, #dedbd3);
  border: 0; border-bottom: 1px solid var(--steel-line);
  cursor: zoom-in; line-height: 0;
  transition: background 0.25s;
}
.p-model svg { width: 100%; height: auto; display: block; }
.prod-card:hover .p-model { background:
    radial-gradient(ellipse 62% 46% at 50% 78%, rgba(22, 25, 29, 0.2), transparent 70%),
    linear-gradient(170deg, #f5f3ee, #e4e1d9); }
.p-model:focus-visible { outline: 3px solid var(--safety); outline-offset: -3px; }
/* the model sits at the top of the card, so tighten the card's own padding */
.prod-card:has(.p-model) { padding-top: 0; }

/* modal stage */
.pm-stage {
  position: relative; margin-bottom: 1.2rem;
  background:
    radial-gradient(ellipse 55% 40% at 50% 80%, rgba(22, 25, 29, 0.2), transparent 70%),
    linear-gradient(170deg, #f2f0ea, #dbd8d0);
  border: 1px solid var(--control-line);
}
.model-view {
  display: block; width: 100%; touch-action: none; cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.model-view.is-dragging { cursor: grabbing; }
.model-view svg { width: 100%; height: auto; display: block; }
.model-view:focus-visible { outline: 3px solid var(--safety); outline-offset: -3px; }
/* schematic cards reuse the fixed bay, so keep model SVGs height-sized */
.card .schematic.model-view svg,
.process-step .schematic.model-view svg,
.product-card .schematic.model-view svg { height: 100%; width: auto; }
.pm-hint {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 0.35rem 0.7rem; text-align: center;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-muted);
  background: linear-gradient(transparent, rgba(219, 216, 208, 0.9) 45%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .p-model, .pm-stage { transition: none; }
}

/* ============================================================
   PRINT - the quote list prints as a clean work order
   ============================================================ */
@media print {
  @page { margin: 14mm; }
  body {
    background: #fff !important; color: #000 !important;
    padding-bottom: 0 !important; font-size: 11pt;
  }
  body::after { display: none !important; }            /* film grain */
  .site-header, .mobile-bar, .scroll-progress, .site-footer,
  .rebar-divider, .caution-stripe, .ghost, .ghost-word,
  .cta-panel, .quote-actions, .cat-toolbar, .cat-chips,
  .pager, .toast, .skip-link, .prod-modal { display: none !important; }

  main, .section, .container { padding: 0 !important; margin: 0 !important; width: auto !important; }
  .section-concrete, .section-dark, .section-panel {
    background: #fff !important; color: #000 !important; clip-path: none !important;
  }
  .page-hero {
    background: #fff !important; color: #000 !important;
    padding: 0 0 8mm !important; border-bottom: 2pt solid #000;
  }
  .page-hero h1 { color: #000 !important; font-size: 24pt; }
  .page-hero .lede, .section-eyebrow { color: #000 !important; }
  .section-eyebrow { border-color: #000 !important; }
  .section-eyebrow .sheet-no { background: #000 !important; color: #fff !important; }

  /* the quote itself */
  .quote-form-grid { display: block !important; margin-bottom: 6mm; }
  .quote-form-grid label { display: block; margin-bottom: 2mm; }
  .cat-input { border: 0 !important; border-bottom: 0.5pt solid #666 !important; background: transparent !important; padding: 0 !important; min-height: 0 !important; font-size: 11pt; }
  .field-label { color: #000 !important; }
  .qt-wrap { overflow: visible !important; }
  .quote-checkout-list {
    position: static !important;
    height: auto !important;
    width: auto !important;
    max-height: none !important;
    transform: none !important;
    box-shadow: none !important;
    border: 1pt solid #999 !important;
    margin: 4mm 0 !important;
  }
  .quote-rail-tab { display: none !important; }
  .quote-rail-panel {
    display: block !important;
    height: auto !important;
    margin-left: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .quote-rail-head { border-bottom-color: #999 !important; }
  .quote-rail-scroll {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .quote-table { min-width: 0 !important; }
  .quote-table th, .quote-table td { border-color: #999 !important; color: #000 !important; }
  .qty-btn, .q-remove { display: none !important; }
  .qty-input { border: 0 !important; background: transparent !important; width: auto !important; min-height: 0 !important; font-size: 11pt; }
  .quote-rail-actions { display: none !important; }
  a { color: #000 !important; text-decoration: none; }
}

/* Quote-form helper text. Carries the "this is not an SMS opt-in" notice, which
   keeps the phone field from reading as a web consent capture - the site's whole
   A2P story is that consent is only ever taken verbally. */
.field-note {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--ink-muted);
}
.field-note a { color: var(--annotate-deep); }

/* The `hidden` attribute must actually hide, even on elements that set their own
   display. `.btn { display: inline-flex }` beats the UA's `[hidden]` rule on
   specificity, which left the Pond Ready Mix hand-off CTA visible with a "#"
   href before its URL was configured - a dead link pointing at another company. */
[hidden] { display: none !important; }

/* Order sheet: length is required on the cut-to-length groups, so a row that
   owes one has to look wrong before the customer presses submit. */
.order-len-input {
  width: 100%; min-width: 4.5rem; min-height: 44px;
  padding: 0 0.5rem;
  font-family: var(--font-mono); font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--control-line); background: #fff; color: var(--ink);
}
.order-len-input.is-missing {
  border-color: var(--rule); border-width: 2px; background: #fff4ef;
}
.order-weight {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted); margin-left: 0.8rem;
}

@media screen {
  /* ============================================================
     A1 HI-VIS THEME RESET
     White job-ticket surfaces, black contractor-grade structure, and one
     unmistakable vest-green signal so A1 stops reading like a generic template.
     ============================================================ */
  body {
    background: var(--paper);
    color: var(--ink);
  }
  body::after {
    opacity: 0.025;
    mix-blend-mode: multiply;
  }
  .caution-stripe {
    height: 10px;
    background: repeating-linear-gradient(-45deg, var(--safety) 0 18px, var(--ink) 18px 28px);
  }
  .scroll-progress { background: var(--safety); }

  .site-header {
    background: rgba(255, 254, 249, 0.97);
    border-bottom: 2px solid var(--ink);
    box-shadow: 0 8px 24px rgba(16, 18, 21, 0.08);
  }
  .site-header::before {
    height: 6px;
    background: repeating-linear-gradient(90deg, var(--safety) 0 28px, var(--ink) 28px 36px);
  }
  .site-header.is-scrolled {
    background: rgba(255, 254, 249, 0.98);
    border-bottom-color: var(--ink);
  }
  .brand { color: var(--ink); }
  .brand-mark {
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--ink);
  }
  .brand-name small,
  .nav-links a { color: var(--ink-muted); }
  .nav-links a:hover,
  .nav-links a[aria-current="page"] {
    color: var(--ink);
    border-bottom-color: var(--safety-deep);
  }
  .nav-cta,
  .btn-primary {
    background: var(--safety);
    color: var(--ink) !important;
    box-shadow: inset 0 0 0 2px var(--ink), 6px 6px 0 var(--ink);
  }
  .nav-cta:hover,
  .btn-primary:hover {
    background: #dcebe5;
    color: var(--ink) !important;
  }
  .nav-drop {
    background: #fffef9;
    border: 2px solid var(--ink);
    border-top: 6px solid var(--safety);
    box-shadow: 10px 14px 0 rgba(16, 18, 21, 0.14);
  }
  .nav-drop-all {
    border-bottom-color: var(--control-line) !important;
    color: var(--safety-deep) !important;
  }
  .nav-drop-all:hover {
    background: var(--vest-soft);
    color: var(--ink) !important;
  }
  .nav-drop-grid a:hover {
    background: var(--vest-soft);
    color: var(--ink);
  }
  .nav-drop-grid a.nav-drop-parent { color: var(--ink); }
  .nav-drop-group { border-bottom-color: rgba(16, 18, 21, 0.14); }
  .nav-drop-subgrid {
    background: #fffef9;
    border-color: var(--control-line);
    box-shadow: 0 12px 24px rgba(16, 18, 21, 0.16);
  }
  .nav-drop-grid a.nav-drop-sub { color: var(--ink-muted); }

  .btn-ghost {
    background: #fff;
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: 5px 5px 0 var(--safety);
  }
  .btn-ghost:hover {
    background: var(--vest-soft);
    color: var(--ink);
  }
  .btn-dark {
    background: var(--ink);
    color: #fff;
    box-shadow: 5px 5px 0 var(--safety);
  }
  .btn-dark:hover { background: #263021; }

  .hero {
    background: linear-gradient(135deg, #fffef9 0 58%, #dcebe5 58% 73%, #101215 73% 100%);
    color: var(--ink-muted);
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(rgba(47, 99, 0, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(47, 99, 0, 0.08) 1px, transparent 1px);
    background-size: 36px 36px;
    pointer-events: none;
  }
  .hero .ghost-word { color: rgba(16, 18, 21, 0.045); }
  .hero h1 {
    color: var(--ink);
    text-shadow: none;
  }
  .hero h1 .stamp-line:nth-child(3) > span {
    color: var(--safety-deep);
    text-shadow: 0 0 18px rgba(18, 63, 55, 0.18);
  }
  .hero-sub { color: var(--ink-muted); }
  .hero-titleblock {
    background: #fff;
    border: 2px solid var(--ink);
    color: var(--ink-muted);
    box-shadow: 8px 8px 0 var(--safety);
  }
  .hero-titleblock span { border-right-color: var(--ink); }
  .hero-titleblock .hot { color: var(--safety-deep); }
  .loc-chip {
    color: var(--ink);
    border: 1px solid var(--ink);
    background: #fff;
  }
  .loc-chip::before {
    background: var(--safety);
    box-shadow: 0 0 0 1.5px var(--ink);
  }
  .loc-chip svg { color: var(--safety-deep); }
  .loc-chip:hover {
    background: var(--safety);
    color: var(--ink);
    border-color: var(--ink);
  }
  .draw-sheet {
    border: 2px solid var(--ink);
    background:
      linear-gradient(rgba(47, 99, 0, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(47, 99, 0, 0.08) 1px, transparent 1px),
      #fff;
    background-size: 28px 28px, 28px 28px, auto;
    box-shadow: 12px 12px 0 var(--safety);
  }
  .draw-sheet .sheet-corner {
    background: var(--safety);
    color: var(--ink);
    border-color: var(--ink);
  }
  .draw-sheet .sheet-corner span { border-left-color: var(--ink); }
  .wall path,
  .wall line,
  .slab path,
  .slab line { stroke: var(--ink); }
  .wall .ground,
  .slab .ground,
  .slab .base,
  .slab .grade { stroke: var(--ink-muted); }
  .wall .header,
  .slab .hot,
  .slab .bar { stroke: var(--safety-deep); }
  .slab .barrier { stroke: var(--annotate-deep); }
  .slab .pour { stroke: var(--galvanized); }
  .slab .chair { stroke: var(--ink); }
  .dim,
  .dim-label {
    stroke: var(--safety-deep);
    fill: var(--safety-deep);
  }
  .schedule {
    background: var(--ink);
    border-top: 6px solid var(--safety);
  }
  .schedule caption,
  .schedule .qty,
  .schedule .qty .unit { color: var(--safety); }
  .schedule th { color: #b8c2af; }
  .schedule td,
  .schedule th { border-bottom-color: rgba(255, 255, 255, 0.16); }

  .section-dark,
  .section-panel,
  .section-concrete {
    background: var(--paper);
    color: var(--ink);
    clip-path: none;
  }
  .section-panel { background: var(--paper-2); }
  .section-concrete { background: #f7f8f5; }
  .section-title,
  .section-concrete .section-title { color: var(--ink); }
  .section-lede,
  .section-concrete .section-lede,
  .section-dark .section-lede,
  .section-panel .section-lede { color: var(--ink-muted); }
  .section-eyebrow,
  .section-panel .section-eyebrow,
  .section-concrete .section-eyebrow { color: var(--safety-deep); }
  .section-eyebrow .sheet-no {
    background: var(--safety);
    color: var(--ink);
  }
  .card-grid > *,
  .division-grid > *,
  .process > *,
  .loc-grid > *,
  .prod-grid > * { border-color: var(--control-line); }
  .card,
  .division,
  .process-step,
  .loc-card,
  .product-card,
  .prod-card,
  .size-guide,
  .quote-size-matrix,
  .quote-product-builder,
  .size-panel,
  .quote-line-row,
  .supplier-pdf-library,
  .quote-reference-figure,
  .legal-callout {
    background: #fff;
    border: 1px solid var(--control-line);
    box-shadow: 7px 7px 0 rgba(18, 63, 55, 0.18);
  }
  .card:hover,
  .division:hover,
  .process-step:hover,
  .loc-card:hover,
  .product-card:hover,
  .prod-card:hover { background: var(--paper-2); }
  .card h3,
  .section-concrete .card h3,
  .division h3,
  .process-step h3,
  .product-card h3,
  .prod-card .p-name button,
  .category-title { color: var(--ink); }
  .card p,
  .section-concrete .card p,
  .division p,
  .process-step p,
  .product-card p,
  .category-proof,
  .prod-card .p-meta,
  .prod-card .p-uom { color: var(--ink-muted); }
  .division .div-no,
  .product-card .sub,
  .prod-card .p-sku,
  .size-panel h4,
  .card .spec-tag { color: var(--safety-deep); }
  .division .div-list,
  .section-dark .division .div-list { color: var(--ink); }
  .division .div-list li::before {
    content: "// ";
    color: var(--safety-deep);
  }
  .schematic,
  .section-concrete .schematic { color: var(--ink-muted); }
  .schematic .hot { stroke: var(--safety-deep); }
  .schematic .note,
  .schematic text,
  .section-concrete .schematic .note,
  .section-concrete .schematic text {
    stroke: var(--safety-deep);
    fill: var(--safety-deep);
  }
  .bom,
  .section-dark .bom,
  .section-panel .bom {
    color: var(--ink-muted);
    border-top-color: var(--control-line);
  }
  .bom b,
  .section-dark .bom b,
  .section-panel .bom b { color: var(--safety-deep); }

  .marquee-section {
    background: var(--safety);
    border-block: 2px solid var(--ink);
  }
  .marquee span { color: var(--ink); }
  .marquee span::after {
    color: #fff;
    text-shadow: -1px -1px 0 var(--ink), 1px 1px 0 var(--ink);
  }
  .marquee span:hover { color: #000; }

  .tx-outline,
  .section-concrete .tx-outline {
    fill: var(--galvanized);
    stroke: var(--ink);
  }
  .tx-yard text,
  .section-concrete .tx-yard text { fill: var(--ink-muted); }
  .tx-yard:hover text { fill: var(--safety-deep); }
  .loc-banner,
  .size-table--matrix thead th,
  .order-table caption,
  .prod-modal .pm-head {
    background: var(--ink);
    color: #fff;
    border-bottom-color: var(--safety);
  }
  .loc-banner .loc-code { color: var(--safety); }
  .loc-line,
  .section-dark .loc-line,
  .section-panel .loc-line { color: var(--ink-muted); }
  .loc-line a,
  .section-dark .loc-line a,
  .section-panel .loc-line a { color: var(--ink); }
  .loc-line svg,
  .section-dark .loc-line svg,
  .section-panel .loc-line svg { color: var(--safety-deep); }

  .cta-panel {
    background: var(--safety);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: 12px 12px 0 var(--ink);
  }
  .cta-panel::before { background: var(--ink); }
  .cta-panel p { color: #263021; }
  .cta-stamp {
    background: var(--ink);
    color: var(--safety);
    border-color: var(--ink);
  }

  .legal-hero,
  .page-hero {
    background: var(--paper);
    color: var(--ink);
    border-bottom: 6px solid var(--safety);
  }
  .legal-hero h1,
  .page-hero h1 { color: var(--ink); }
  .legal-hero .updated,
  .page-hero .lede { color: var(--ink-muted); }
  .page-hero .ghost-word { color: rgba(16, 18, 21, 0.05); }
  .brand-lede-strip span {
    background: var(--safety);
    border-color: var(--ink);
    color: var(--ink);
  }
  .product-hero-shot {
    background: #fff;
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--safety);
  }
  .product-hero-shot figcaption {
    background: linear-gradient(to top, rgba(16, 18, 21, 0.86), rgba(16, 18, 21, 0));
  }

  .cat-input,
  .cat-select,
  .size-qty-input,
  .quote-line-input,
  .qty-input,
  .order-len-input {
    background: #fff;
    border: 1px solid var(--control-line);
    color: var(--ink);
  }
  .cat-input:focus,
  .cat-select:focus,
  .size-qty-input:focus,
  .quote-line-input:focus,
  .qty-input:focus,
  .order-len-input:focus {
    background: #ffffff;
    border-color: var(--safety-deep);
  }
  .cat-chip {
    background: #fff;
    color: var(--ink-muted);
  }
  .cat-chip.is-active,
  .pager button.is-current {
    background: var(--safety);
    border-color: var(--ink);
    color: var(--ink);
  }
  .btn-add,
  .category-quote,
  .quote-file::file-selector-button,
  .quote-rail-tab {
    background: var(--ink);
    color: #fff;
  }
  .btn-add:hover,
  .category-quote:hover { background: #263021; }
  .btn-add.is-added,
  .quote-rail-count-badge,
  .spec-check {
    background: var(--safety);
    color: var(--ink);
  }
  .p-contact,
  .q-remove,
  .prod-card .p-name button:hover,
  .category-resource:hover,
  .supplier-pdf-group a:hover,
  .field-note a { color: var(--safety-deep); }
  .quote-checkout-list {
    background: #fff;
    border-color: var(--control-line);
    box-shadow: 0 22px 52px rgba(16, 18, 21, 0.18);
  }
  .quote-product-active .supplier-pdf-library {
    background: #f7f8f5;
    border-color: var(--safety-deep);
  }
  .quote-product-active .supplier-pdf-library::before {
    background: var(--safety);
    color: var(--ink);
    border: 1px solid var(--ink);
  }
  .size-matrix-wrap,
  .quote-line-row,
  .order-table thead th { background: var(--paper-2); }
  .order-table,
  .quote-table td,
  .order-table th,
  .order-table td { border-color: #cbd6c2; }
  .order-summary {
    background: #fff;
    border-color: var(--ink);
    border-left-color: var(--safety);
    box-shadow: 8px 8px 0 rgba(18, 63, 55, 0.22);
  }
  .order-contact-link:hover { background: var(--vest-soft); }

  .p-model,
  .prod-card:hover .p-model,
  .pm-stage {
    background:
      radial-gradient(ellipse 62% 46% at 50% 78%, rgba(16, 18, 21, 0.16), transparent 70%),
      linear-gradient(170deg, #fffaf2, #e8f2df);
  }
  .pm-hint {
    background: linear-gradient(transparent, rgba(232, 242, 223, 0.9) 45%);
  }

  .mobile-bar {
    background: rgba(255, 254, 249, 0.98);
    border-top: 2px solid var(--ink);
    box-shadow: 0 -8px 22px rgba(16, 18, 21, 0.1);
  }
  .mobile-bar a { color: var(--ink-muted); }
  .mobile-bar a:active { background: var(--vest-soft); }
  .mobile-bar .bar-cta {
    background: var(--safety);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
  }
  .mobile-bar .q-badge,
  .nav-cta .q-badge {
    background: var(--ink);
    color: var(--safety);
  }

  .site-footer {
    background: var(--ink);
    color: #cbd6c2;
    border-top: 8px solid var(--safety);
  }
  .footer-grid,
  .footer-bottom,
  .footer-grid > div { border-color: rgba(255, 255, 255, 0.16); }
  .footer-grid h2 { color: var(--safety); }
  .footer-grid a,
  .footer-bottom a { color: #e6ece0; }
  .footer-grid a:hover,
  .footer-bottom a:hover { color: var(--safety); }
  .toast {
    background: var(--ink);
    border-left-color: var(--safety);
    color: #fff;
  }

  /* Anti-template pass: grounded commerce layout over generated poster effects. */
  .rebar-divider,
  .hero .ghost-word,
  .ghost { display: none !important; }
  .js .hero h1 .stamp-line > span,
  .js .hero-sub,
  .js .hero .hero-actions,
  .js .loc-chips,
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .draw.is-drawn [pathLength],
  .play .stamp-line > span,
  .play .dim,
  .play .dim-label {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }

  .hero {
    background:
      linear-gradient(90deg, rgba(18, 63, 55, 0.08) 0 12px, transparent 12px),
      linear-gradient(rgba(36, 87, 0, 0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(36, 87, 0, 0.055) 1px, transparent 1px),
      #fffef9;
    background-size: auto, 34px 34px, 34px 34px, auto;
    padding: clamp(3rem, 7vh, 5.25rem) 0 0;
  }
  .hero::before { display: none; }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.82fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
    padding-bottom: clamp(2.2rem, 5vh, 3.5rem);
  }
  .hero-titleblock {
    margin-bottom: 1.4rem;
    border: 2px solid var(--ink);
    border-left: 10px solid var(--safety);
    box-shadow: none;
  }
  .hero-titleblock span { padding: 0.42rem 0.78rem; }
  .hero h1 {
    max-width: 10.5ch;
    font-size: clamp(3.25rem, 7vw, 6.25rem);
    line-height: 0.92;
  }
  .hero h1 .stamp-line {
    display: block;
    overflow: visible;
  }
  .hero h1 .stamp-line:nth-child(3) > span {
    color: var(--ink);
    text-shadow: none;
  }
  .hero-sub {
    max-width: 64ch;
    margin: 1.4rem 0 1.35rem;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    color: #2f382d;
  }
  .hero-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 2px solid var(--ink);
    background: #fff;
  }
  .hero-proof li {
    min-width: 0;
    padding: 0.8rem 0.9rem;
    border-left: 1px solid var(--control-line);
    overflow-wrap: anywhere;
  }
  .hero-proof li:first-child { border-left: 0; }
  .hero-proof b {
    display: block;
    margin-bottom: 0.24rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--safety-deep);
  }
  .hero-proof a {
    color: var(--ink);
    text-decoration: none;
  }
  .hero-proof a:hover { text-decoration: underline; }

  .btn,
  .nav-cta {
    clip-path: none;
    border: 2px solid var(--ink);
    box-shadow: none;
  }
  .btn {
    min-height: 48px;
    padding: 0.85rem 1.3rem;
  }
  .btn-primary,
  .nav-cta {
    background: var(--safety);
    color: var(--ink) !important;
  }
  .btn-primary:hover,
  .nav-cta:hover { background: var(--annotate); }
  .btn-ghost {
    background: #fff;
    box-shadow: none;
  }

  .yard-photo-card {
    min-height: clamp(20rem, 38vw, 30rem);
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--ink);
    background: #fff;
    box-shadow: none;
  }
  .yard-photo-card .hero-material-photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    filter: saturate(0.96) contrast(1.03);
  }
  .yard-photo-card .wall { display: none; }
  .yard-photo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, rgba(16, 18, 21, 0.24), rgba(16, 18, 21, 0.02) 45%),
      linear-gradient(90deg, rgba(18, 63, 55, 0.28) 0 12px, transparent 12px);
    pointer-events: none;
  }
  .yard-photo-card .sheet-corner {
    right: 0;
    bottom: 0;
    background: var(--safety);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-right: 0;
    border-bottom: 0;
  }
  .yard-photo-card .sheet-corner span { border-left-color: var(--ink); }

  .schedule {
    background: #fff;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
  }
  .schedule table { color: var(--ink); }
  .schedule caption {
    padding-top: 0.9rem;
    letter-spacing: 0.14em;
    color: var(--ink);
  }
  .schedule th {
    color: var(--ink-muted);
    border-bottom-color: var(--control-line);
  }
  .schedule td { border-bottom-color: var(--control-line); }
  .schedule .qty,
  .schedule .qty .unit { color: var(--ink); }

  .section { padding: clamp(3.75rem, 8vh, 5.5rem) 0; }
  .section-title {
    font-size: clamp(2rem, 4.4vw, 3.35rem);
    line-height: 1;
  }
  .section-eyebrow {
    padding: 0.15rem 0.35rem;
    background: var(--safety);
    color: var(--ink) !important;
  }
  .card,
  .division,
  .process-step,
  .loc-card,
  .product-card,
  .prod-card,
  .size-guide,
  .quote-size-matrix,
  .quote-product-builder,
  .size-panel,
  .quote-line-row,
  .supplier-pdf-library,
  .quote-reference-figure,
  .legal-callout {
    box-shadow: none;
  }
  .card::after,
  .product-card::after {
    transform: scaleX(1);
    opacity: 0.72;
  }

  .marquee {
    width: auto;
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
  }
  .marquee-dup { display: none; }
  .marquee span {
    padding: 0.72rem 1rem;
    gap: 0;
    font-size: clamp(1rem, 2vw, 1.35rem);
  }
  .marquee span::after { content: ""; }

  @media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-grid > * { min-width: 0; }
    .yard-photo-card { min-height: 18rem; }
  }
  @media (max-width: 640px) {
    .container {
      width: min(var(--container), calc(100% - 2.5rem));
      max-width: 100%;
    }
    .site-header .nav-bar {
      width: calc(100vw - 2.5rem);
      max-width: calc(100vw - 2.5rem);
      gap: 0.75rem;
      padding: 0.7rem 0;
    }
    .brand {
      max-width: 100%;
      min-width: 0;
    }
    .brand-name {
      white-space: normal;
      max-width: calc(100vw - 6.5rem);
      line-height: 0.95;
    }
    .site-header nav {
      align-self: stretch;
      width: calc(100vw - 2.5rem);
      max-width: calc(100vw - 2.5rem);
      overflow-x: clip;
    }
    .nav-links {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.35rem;
      width: calc(100vw - 2.5rem);
      max-width: calc(100vw - 2.5rem);
      box-sizing: border-box;
    }
    .nav-links li { min-width: 0; }
    .nav-links a {
      width: 100%;
      padding: 0.5rem 0.25rem;
      border: 1px solid var(--control-line);
      text-align: center;
      font-size: 0.64rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .nav-links a[aria-current="page"] {
      background: var(--safety);
      border-color: var(--ink);
    }
    .nav-cta { margin-left: 0; }
    .hero { padding-top: 2.1rem; }
    .hero .container.hero-grid {
      width: calc(100vw - 2.5rem);
      max-width: calc(100vw - 2.5rem);
      margin-inline: auto;
      overflow: visible;
    }
    .hero-grid > div {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: visible;
    }
    .hero-titleblock {
      display: grid;
      grid-template-columns: 1fr;
      width: 100%;
      max-width: 100%;
      font-size: 0.62rem;
      letter-spacing: 0.11em;
    }
    .hero-titleblock span {
      min-width: 0;
      border-right: 0;
      border-bottom: 1px solid var(--ink);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .hero-titleblock span:last-child { border-bottom: 0; }
    .hero h1 {
      max-width: 100%;
      font-size: clamp(2.5rem, 12.5vw, 3.65rem);
    }
    .hero h1 .stamp-line > span { max-width: 100%; }
    .hero-sub {
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    .hero-proof { grid-template-columns: 1fr; }
    .hero-proof li {
      border-left: 0;
      border-top: 1px solid var(--control-line);
    }
    .hero-proof li:first-child { border-top: 0; }
    .hero-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.8rem;
      max-width: 100%;
    }
    .hero-actions .btn {
      width: 100%;
      justify-content: center;
    }
    .loc-chips {
      display: grid;
      grid-template-columns: 1fr;
      max-width: 100%;
    }
    .loc-chip {
      clip-path: none;
      justify-content: center;
      padding: 0.55rem 0.7rem;
      white-space: normal;
      overflow-wrap: anywhere;
      text-align: center;
    }
    .yard-photo-card { min-height: 15rem; }
    .schedule caption { letter-spacing: 0.08em; }
  }
}

@media screen {
  /* Brand reset v2: make A1 feel like a material yard, not a tech template. */
  :root {
    --safety: #123f37;
    --safety-deep: #071f1b;
    --brand-ink: #123f37;
    --brand-paper: #f8faf4;
    --wood-warm: #b46b2b;
  }

  body { background: var(--brand-paper); }
  body::after { opacity: 0.018; }
  .caution-stripe,
  .site-header::before {
    height: 10px;
    background:
      linear-gradient(90deg, var(--brand-ink) 0 5%, transparent 5% 5.7%, var(--safety) 5.7% 100%),
      var(--safety);
  }

  .site-header {
    background: rgba(255, 250, 240, 0.98);
    border-bottom: 1px solid rgba(17, 22, 17, 0.18);
    box-shadow: none;
  }
  .nav-bar {
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: 0.95rem 0;
  }
  .brand {
    align-items: center;
    gap: clamp(0.8rem, 1.6vw, 1.2rem);
    color: var(--brand-ink);
  }
  .brand-mark--yard {
    position: relative;
    width: clamp(4.9rem, 8vw, 7.4rem);
    height: clamp(3.4rem, 5.6vw, 4.85rem);
    display: grid;
    grid-template-columns: 1fr 1.6rem;
    align-items: stretch;
    overflow: hidden;
    background: var(--safety);
    color: var(--brand-ink);
    border: 3px solid var(--brand-ink);
    clip-path: none;
    box-shadow: 0.45rem 0.45rem 0 var(--brand-ink);
  }
  .brand-mark--yard::before {
    content: "";
    position: absolute;
    left: 0.42rem;
    right: 2.02rem;
    bottom: 0.42rem;
    height: 0.34rem;
    background: repeating-linear-gradient(90deg, rgba(17, 22, 17, 0.96) 0 1.1rem, rgba(17, 22, 17, 0.16) 1.1rem 1.34rem);
  }
  .brand-mark--yard .mark-main {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.06em;
    align-self: center;
    font-family: var(--font-display);
    font-size: clamp(2.7rem, 5vw, 4.35rem);
    font-weight: 900;
    line-height: 0.76;
    letter-spacing: 0;
  }
  .brand-mark--yard .mark-main span:first-child { transform: skew(-8deg); }
  .brand-mark--yard .mark-main span:last-child {
    font-size: 0.88em;
    font-family: var(--font-body);
    font-weight: 900;
  }
  .brand-mark--yard .mark-dash,
  .hero-mark-main .mark-dash {
    align-self: center;
    width: 0.22em;
    height: 0.09em;
    background: currentColor;
    transform: translateY(-0.03em);
  }
  .brand-mark--yard .mark-planks {
    position: absolute;
    left: 0.42rem;
    right: 2.02rem;
    top: 0.46rem;
    height: 0.28rem;
    border-top: 2px solid var(--brand-ink);
    border-bottom: 2px solid var(--brand-ink);
    opacity: 0.9;
  }
  .brand-mark--yard .mark-label {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    background: var(--brand-ink);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--safety);
  }
  .brand-name {
    max-width: 18ch;
    font-size: clamp(1.85rem, 3vw, 3.2rem);
    letter-spacing: 0.005em;
    line-height: 0.9;
    white-space: normal;
  }
  .brand-name small {
    margin-top: 0.45rem;
    font-size: clamp(0.62rem, 0.86vw, 0.82rem);
    letter-spacing: 0.18em;
    color: #51614c;
  }
  .nav-links a {
    color: #354133;
    border-bottom-color: transparent;
  }
  .nav-links a:hover,
  .nav-links a[aria-current="page"] {
    color: var(--brand-ink);
    border-bottom-color: var(--safety);
  }
  .nav-cta {
    border: 2px solid var(--brand-ink);
    background: var(--brand-ink);
    color: #fff !important;
    box-shadow: 0.34rem 0.34rem 0 var(--safety);
  }
  .nav-cta:hover {
    background: var(--safety);
    color: var(--brand-ink) !important;
  }

  .hero-brand-hero {
    min-height: auto;
    padding: clamp(2.8rem, 7vh, 5.4rem) 0 0;
    background:
      linear-gradient(115deg, transparent 0 55%, rgba(18, 63, 55, 0.1) 55% 69%, var(--brand-ink) 69% 100%),
      var(--brand-paper);
    color: var(--brand-ink);
  }
  .hero-brand-hero .hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(22rem, 0.88fr);
    align-items: center;
    gap: clamp(2.3rem, 5.5vw, 5.5rem);
    padding-bottom: clamp(3rem, 8vh, 6rem);
  }
  .hero-brand-hero .hero-titleblock {
    display: inline-flex;
    gap: 0;
    margin-bottom: clamp(1.1rem, 3vh, 1.9rem);
    border: 0;
    color: var(--brand-ink);
  }
  .hero-brand-hero .hero-titleblock span {
    border: 1px solid rgba(17, 22, 17, 0.24);
    border-right: 0;
    background: rgba(255, 255, 255, 0.74);
    color: #344133;
    padding: 0.48rem 0.72rem;
  }
  .hero-brand-hero .hero-titleblock span:last-child { border-right: 1px solid rgba(17, 22, 17, 0.24); }
  .hero-brand-hero .hero-titleblock .hot {
    background: var(--safety);
    color: var(--brand-ink);
  }
  .hero-company-mark {
    display: inline-flex;
    align-items: stretch;
    margin-bottom: clamp(1rem, 2.4vh, 1.5rem);
    border: 3px solid var(--brand-ink);
    background: var(--safety);
    box-shadow: 0.52rem 0.52rem 0 var(--brand-ink);
  }
  .hero-mark-main {
    display: flex;
    align-items: baseline;
    gap: 0.06em;
    padding: 0.26rem 0.55rem 0.12rem;
    font-family: var(--font-display);
    font-size: clamp(4.7rem, 8vw, 7.8rem);
    font-weight: 900;
    line-height: 0.73;
    letter-spacing: 0;
  }
  .hero-mark-main span:first-child { transform: skew(-8deg); }
  .hero-mark-main span:last-child {
    font-family: var(--font-body);
    font-size: 0.88em;
    font-weight: 900;
  }
  .hero-mark-side {
    display: grid;
    place-items: center;
    padding: 0.35rem 0.65rem;
    border-left: 3px solid var(--brand-ink);
    background: var(--brand-ink);
    color: var(--safety);
    font-family: var(--font-mono);
    font-size: clamp(0.62rem, 1vw, 0.86rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.15;
    text-transform: uppercase;
  }
  .hero-brand-hero h1 {
    max-width: 12.2ch;
    color: var(--brand-ink);
    font-size: clamp(4.3rem, 8.4vw, 8.8rem);
    line-height: 0.78;
    letter-spacing: 0;
  }
  .hero-brand-hero h1 .stamp-line {
    overflow: visible;
  }
  .hero-brand-hero h1 .stamp-line > span,
  .hero-brand-hero h1 .stamp-line:nth-child(3) > span {
    color: var(--brand-ink);
    text-shadow: none;
  }
  .hero-brand-hero h1 .stamp-line:nth-child(3) > span {
    padding-inline: 0.04em;
    margin-inline-start: -0.04em;
    background: linear-gradient(180deg, transparent 0 55%, var(--safety) 55% 92%, transparent 92% 100%);
  }
  .hero-brand-subtitle {
    display: inline-flex;
    margin: 1.05rem 0 0;
    padding: 0.44rem 0.72rem;
    background: var(--safety);
    color: var(--brand-ink);
    font-family: var(--font-mono);
    font-size: clamp(0.86rem, 1.25vw, 1.12rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.15;
    text-transform: uppercase;
  }
  .hero-brand-hero .hero-sub {
    max-width: 62ch;
    margin: 1.35rem 0 1.25rem;
    color: #293429;
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  }
  .hero-brand-hero .hero-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.72rem;
    border: 0;
    background: transparent;
  }
  .hero-brand-hero .hero-proof li {
    border: 1px solid rgba(17, 22, 17, 0.2);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 0.5rem 0 rgba(18, 63, 55, 0.12);
  }
  .hero-brand-hero .hero-actions {
    margin-top: 1.55rem;
  }
  .hero-brand-hero .btn {
    border-radius: 0;
    border: 2px solid var(--brand-ink);
    clip-path: none;
  }
  .hero-brand-hero .btn-primary {
    background: var(--brand-ink);
    color: #fff !important;
    box-shadow: 0.46rem 0.46rem 0 var(--safety);
  }
  .hero-brand-hero .btn-primary:hover {
    background: var(--safety);
    color: var(--brand-ink) !important;
  }
  .hero-brand-hero .btn-ghost {
    background: transparent;
    color: var(--brand-ink);
    box-shadow: none;
  }
  .material-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: clamp(1.4rem, 3.5vh, 2.2rem);
  }
  .material-rail a {
    min-width: 0;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem;
    border: 1px solid rgba(17, 22, 17, 0.18);
    background: rgba(255, 255, 255, 0.68);
    color: var(--brand-ink);
    text-decoration: none;
    transition: transform 0.18s var(--ease-out), border-color 0.18s, background 0.18s;
  }
  .material-rail a:hover {
    transform: translateY(-2px);
    border-color: var(--brand-ink);
    background: #fff;
  }
  .material-rail img {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
  }
  .material-rail span {
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .hero-brand-hero .loc-chips {
    margin-top: 1.35rem;
  }

  .brand-showcase {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(7rem, 0.62fr);
    gap: clamp(0.65rem, 1.4vw, 0.95rem);
    min-height: clamp(27rem, 44vw, 35rem);
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }
  .brand-showcase::before {
    content: "A1";
    position: absolute;
    right: -0.2em;
    top: -0.34em;
    z-index: -1;
    font-family: var(--font-display);
    font-size: clamp(9rem, 21vw, 18rem);
    font-weight: 900;
    line-height: 1;
    color: rgba(18, 63, 55, 0.11);
  }
  .brand-showcase .hero-material-photo,
  .brand-showcase .showcase-strip img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    border: 3px solid var(--brand-ink);
    filter: saturate(0.96) contrast(1.04);
    box-shadow: 0.75rem 0.75rem 0 rgba(17, 22, 17, 0.95);
  }
  .brand-showcase .hero-material-photo {
    grid-row: 1 / 3;
  }
  .brand-showcase .showcase-strip {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: clamp(0.65rem, 1.4vw, 0.95rem);
  }
  .brand-showcase::after,
  .brand-showcase .wall { display: none; }
  .brand-showcase .sheet-corner {
    right: auto;
    left: 0;
    bottom: -1.1rem;
    background: var(--brand-ink);
    color: #fff;
    border: 0;
    box-shadow: 0.46rem 0.46rem 0 var(--safety);
  }
  .brand-showcase .sheet-corner span {
    border-left-color: rgba(255, 255, 255, 0.24);
  }

  .schedule {
    background: var(--brand-ink);
    border: 0;
  }
  .schedule caption,
  .schedule table,
  .schedule .qty,
  .schedule .qty .unit {
    color: #fff;
  }
  .schedule th,
  .schedule td {
    border-bottom-color: rgba(255, 255, 255, 0.16);
  }
  .schedule caption { color: var(--safety); }

  @media (max-width: 1180px) {
    .nav-bar { align-items: flex-start; }
    .nav-links { justify-content: flex-start; }
  }
  @media (max-width: 960px) {
    .hero-brand-hero {
      background:
        linear-gradient(180deg, var(--brand-paper) 0 67%, rgba(18, 63, 55, 0.18) 67% 78%, var(--brand-ink) 78% 100%);
    }
    .hero-brand-hero .hero-grid {
      grid-template-columns: 1fr;
    }
    .brand-showcase {
      min-height: 25rem;
    }
  }
  @media (max-width: 640px) {
    .brand-mark--yard {
      width: 4.55rem;
      height: 3.15rem;
      border-width: 2px;
      box-shadow: 0.28rem 0.28rem 0 var(--brand-ink);
    }
    .brand-name {
      max-width: calc(100vw - 7.4rem);
      font-size: 1.2rem;
      line-height: 0.92;
    }
    .brand-name small {
      font-size: 0.49rem;
      letter-spacing: 0.1em;
    }
    .hero-brand-hero { padding-top: 2rem; }
    .hero-company-mark {
      border-width: 2px;
      box-shadow: 0.34rem 0.34rem 0 var(--brand-ink);
    }
    .hero-mark-main {
      font-size: clamp(3.75rem, 18vw, 4.9rem);
      padding-inline: 0.42rem;
    }
    .hero-mark-side {
      border-left-width: 2px;
      font-size: 0.56rem;
      letter-spacing: 0.11em;
    }
    .hero-brand-hero h1 {
      max-width: 9ch;
      font-size: clamp(3.25rem, 15.5vw, 4.85rem);
      line-height: 0.8;
    }
    .hero-brand-subtitle {
      display: flex;
      width: 100%;
      font-size: 0.75rem;
      letter-spacing: 0.1em;
    }
    .hero-brand-hero .hero-proof,
    .material-rail {
      grid-template-columns: 1fr;
    }
    .material-rail a {
      grid-template-columns: 3.45rem minmax(0, 1fr);
    }
    .brand-showcase {
      grid-template-columns: 1fr 1fr;
      min-height: auto;
    }
    .brand-showcase .hero-material-photo {
      grid-column: 1 / -1;
      grid-row: auto;
      aspect-ratio: 1.45 / 1;
    }
    .brand-showcase .showcase-strip {
      grid-column: 1 / -1;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: none;
    }
    .brand-showcase .showcase-strip img {
      aspect-ratio: 1.25 / 1;
    }
    .brand-showcase .sheet-corner {
      position: static;
      grid-column: 1 / -1;
      box-shadow: none;
    }
  }
}

@media screen {
  /* Brand reset v3: insignia mark and single-line header lockup. */
  .brand-mark--insignia {
    position: relative;
    width: 5rem;
    height: 5rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: visible;
    isolation: isolate;
    clip-path: none;
    border: 2px solid var(--brand-ink);
    border-radius: 50%;
    background: var(--brand-ink);
    color: var(--brand-ink);
    box-shadow:
      inset 0 0 0 0.3rem var(--safety),
      inset 0 0 0 0.48rem var(--brand-ink),
      0.3rem 0.3rem 0 var(--safety);
  }
  .brand-mark--insignia::before {
    content: "";
    position: absolute;
    inset: 0.72rem;
    z-index: -1;
    border: 2px solid var(--brand-ink);
    border-radius: 50%;
    background: var(--brand-paper);
    box-shadow: 0 0 0 0.2rem var(--safety);
  }
  .brand-mark--insignia::after {
    content: "LUMBER";
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--brand-paper);
    font-family: var(--font-mono);
    font-size: 0.44rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
  }
  .brand-mark--insignia .mark-main {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 0.03em;
    transform: translate(-50%, -53%);
    font-family: var(--font-display);
    font-size: 2.28rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.78;
  }
  .brand-mark--insignia .mark-main span:first-child {
    transform: skew(-7deg);
  }
  .brand-mark--insignia .mark-main span:last-child {
    font-family: var(--font-body);
    font-size: 0.9em;
    font-weight: 900;
  }
  .brand-mark--insignia .mark-dash,
  .hero-mark-main .mark-dash {
    align-self: center;
    width: 0.2em;
    height: 0.075em;
    background: currentColor;
    transform: translateY(-0.03em);
  }
  .brand-mark--insignia .mark-planks {
    position: absolute;
    left: 50%;
    top: 61%;
    z-index: 1;
    width: 2.6rem;
    height: 0.18rem;
    border: 1px solid var(--brand-ink);
    background: var(--wood-warm);
    transform: translateX(-50%) rotate(-15deg);
  }
  .brand-mark--insignia .mark-planks::before {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid var(--brand-ink);
    background: var(--wood-warm);
    transform: rotate(30deg);
  }
  .brand-mark--insignia .mark-label {
    position: absolute;
    left: 50%;
    bottom: 0.23rem;
    z-index: 3;
    display: block;
    padding: 0.06rem 0.34rem;
    border: 2px solid var(--brand-ink);
    border-radius: 999px;
    background: var(--safety);
    color: var(--brand-ink);
    font-family: var(--font-mono);
    font-size: 0.44rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-align: center;
    writing-mode: horizontal-tb;
    transform: translateX(-50%);
  }

  .site-header .nav-bar {
    align-items: center;
    flex-wrap: nowrap;
    gap: 1.15rem;
    padding: 0.78rem 0;
  }
  .site-header .brand {
    flex: 0 0 auto;
    min-width: 0;
    gap: 0.78rem;
  }
  .site-header .brand-mark--insignia {
    width: 4.6rem;
    height: 4.6rem;
  }
  .site-header .brand-name {
    max-width: none;
    font-size: 2.05rem;
    letter-spacing: 0.015em;
    line-height: 0.88;
    white-space: nowrap;
  }
  .site-header .brand-name small {
    margin-top: 0.35rem;
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    white-space: nowrap;
  }
  .site-header nav {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
  }
  .site-header .nav-links {
    flex-wrap: nowrap;
    justify-content: flex-end;
    row-gap: 0;
  }
  .site-header .nav-links a {
    padding: 0.52rem 0.5rem;
    font-size: 0.71rem;
    letter-spacing: 0.05em;
  }
  .site-header .nav-cta {
    margin-left: 0.24rem;
    padding: 0.68rem 0.82rem;
  }

  .hero-company-mark {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 10.3rem;
    height: 10.3rem;
    margin: 0 0 1.55rem;
    overflow: visible;
    isolation: isolate;
    border: 3px solid var(--brand-ink);
    border-radius: 50%;
    background: var(--brand-ink);
    box-shadow:
      inset 0 0 0 0.56rem var(--safety),
      inset 0 0 0 0.82rem var(--brand-ink),
      0.5rem 0.5rem 0 var(--safety);
  }
  .hero-company-mark::before {
    content: "";
    position: absolute;
    inset: 1.36rem;
    z-index: -1;
    border: 3px solid var(--brand-ink);
    border-radius: 50%;
    background: var(--brand-paper);
    box-shadow: 0 0 0 0.35rem var(--safety);
  }
  .hero-company-mark::after {
    content: "LUMBER";
    position: absolute;
    top: 0.95rem;
    left: 50%;
    color: var(--brand-paper);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1;
    transform: translateX(-50%);
  }
  .hero-mark-main {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 0.03em;
    padding: 0;
    color: var(--brand-ink);
    font-family: var(--font-display);
    font-size: 5.4rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.78;
    transform: translate(-50%, -54%);
  }
  .hero-mark-main span:first-child {
    transform: skew(-7deg);
  }
  .hero-mark-main span:last-child {
    font-family: var(--font-body);
    font-size: 0.9em;
    font-weight: 900;
  }
  .hero-mark-side {
    position: absolute;
    left: 50%;
    bottom: -0.42rem;
    z-index: 3;
    display: block;
    width: max-content;
    max-width: 12rem;
    padding: 0.34rem 0.76rem;
    border: 2px solid var(--brand-ink);
    border-radius: 999px;
    background: var(--safety);
    box-shadow: 0.24rem 0.24rem 0 var(--brand-ink);
    color: var(--brand-ink);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%);
  }

  @media (max-width: 1080px) {
    .site-header .nav-bar {
      flex-wrap: wrap;
      align-items: center;
    }
    .site-header nav {
      flex-basis: 100%;
      margin-left: 0;
    }
    .site-header .nav-links {
      justify-content: flex-start;
    }
  }

  @media (max-width: 640px) {
    .brand-mark--insignia,
    .site-header .brand-mark--insignia {
      width: 3.4rem;
      height: 3.4rem;
      border-width: 2px;
      box-shadow:
        inset 0 0 0 0.2rem var(--safety),
        inset 0 0 0 0.34rem var(--brand-ink),
        0.18rem 0.18rem 0 var(--safety);
    }
    .brand-mark--insignia::before {
      inset: 0.5rem;
      border-width: 1px;
      box-shadow: 0 0 0 0.13rem var(--safety);
    }
    .brand-mark--insignia::after {
      top: 0.33rem;
      font-size: 0.3rem;
      letter-spacing: 0.1em;
    }
    .brand-mark--insignia .mark-main {
      font-size: 1.55rem;
    }
    .brand-mark--insignia .mark-planks {
      width: 1.74rem;
      height: 0.13rem;
    }
    .brand-mark--insignia .mark-label {
      bottom: 0.1rem;
      padding: 0.04rem 0.22rem;
      border-width: 1px;
      font-size: 0.28rem;
      letter-spacing: 0.08em;
    }
    .site-header .brand {
      gap: 0.58rem;
    }
    .site-header .brand-name {
      max-width: calc(100vw - 5.9rem);
      overflow: visible;
      font-size: 1.05rem;
      letter-spacing: 0.01em;
      line-height: 0.92;
      white-space: nowrap;
    }
    .site-header .brand-name small {
      font-size: 0.42rem;
      letter-spacing: 0.08em;
    }
    .hero-company-mark {
      width: 7.4rem;
      height: 7.4rem;
      border-width: 2px;
      box-shadow:
        inset 0 0 0 0.38rem var(--safety),
        inset 0 0 0 0.58rem var(--brand-ink),
        0.32rem 0.32rem 0 var(--safety);
    }
    .hero-company-mark::before {
      inset: 1rem;
      border-width: 2px;
      box-shadow: 0 0 0 0.22rem var(--safety);
    }
    .hero-company-mark::after {
      top: 0.68rem;
      font-size: 0.48rem;
      letter-spacing: 0.14em;
    }
    .hero-mark-main {
      font-size: 3.85rem;
    }
    .hero-mark-side {
      bottom: -0.36rem;
      max-width: calc(100vw - 3rem);
      padding: 0.28rem 0.58rem;
      font-size: 0.48rem;
      letter-spacing: 0.08em;
    }
  }
}

@media screen {
  /* Quote readability layer: keep the card green as the brand, not the page wash. */
  :root {
    --coal: #071f1b;
    --coal-2: #123f37;
    --gunmetal: #f4f5f0;
    --smoke: #d7ddd4;
    --steel-line: rgba(7, 31, 27, 0.18);
    --steel-text: #25443d;
    --steel-dim: #5c6e67;
    --concrete: #ffffff;
    --concrete-2: #f5f6f1;
    --form-ply: #eef1e9;
    --ink: #0a201b;
    --ink-muted: #485d56;
    --safety: #123f37;
    --safety-deep: #071f1b;
    --annotate: #24574e;
    --annotate-deep: #0f3a33;
    --control-line: #b8c2ba;
    --paper: #ffffff;
    --paper-2: #f6f7f2;
    --vest-soft: #e5eee9;
    --galvanized: #eef1ec;
    --brand-paper: #ffffff;
    --brand-mint: #e3eee8;
  }

  body,
  .legal-hero,
  .page-hero,
  .section-concrete,
  .section-dark,
  .section-panel {
    background: #ffffff;
    color: var(--ink);
  }

  .section-panel,
  .product-card,
  .prod-card:hover,
  .stock-list a:nth-child(4n+2),
  .stock-list a:nth-child(4n+3) {
    background: #f6f7f2;
  }

  .hero-brand-hero {
    background:
      linear-gradient(115deg, transparent 0 64%, rgba(18, 63, 55, 0.08) 64% 74%, #f6f7f2 74% 100%),
      #ffffff;
  }

  .page-hero,
  .legal-hero {
    border-bottom-color: rgba(18, 63, 55, 0.45);
  }

  .section-eyebrow .sheet-no,
  .brand-lede-strip span,
  .stock-list span,
  .cat-chip.is-active,
  .pager button.is-current,
  .spec-check,
  .quote-rail-count-badge {
    background: var(--safety) !important;
    border-color: var(--safety-deep) !important;
    color: #ffffff !important;
  }

  .btn-primary,
  .nav-cta,
  .mobile-bar .bar-cta,
  .quote-file::file-selector-button {
    background: var(--safety) !important;
    border-color: var(--safety) !important;
    color: #ffffff !important;
  }

  .btn-primary:hover,
  .nav-cta:hover,
  .mobile-bar .bar-cta:hover,
  .quote-file::file-selector-button:hover {
    background: var(--safety-deep) !important;
    border-color: var(--safety-deep) !important;
    color: #ffffff !important;
  }

  .section-eyebrow,
  .section-panel .section-eyebrow,
  .section-concrete .section-eyebrow,
  .division .div-no,
  .product-card .sub,
  .prod-card .p-sku,
  .size-panel h4,
  .card .spec-tag,
  .p-contact,
  .q-remove,
  .field-note a,
  .legal-body a,
  .prod-card .p-name button:hover,
  .category-title,
  .category-resource:hover {
    color: var(--safety);
  }

  .brand-lede-strip span {
    box-shadow: none;
  }

  .size-guide,
  .quote-size-matrix,
  .quote-product-builder,
  .size-matrix-wrap,
  .quote-line-row,
  .engineered-additional,
  .quote-checkout-list,
  .quote-summary,
  .legal-callout,
  .size-panel,
  .card,
  .division,
  .process-step,
  .loc-card,
  .product-card,
  .prod-card {
    background: #ffffff;
    border-color: var(--control-line);
    color: var(--ink);
  }

  .size-matrix-wrap,
  .quote-line-row,
  .engineered-additional-table td,
  .product-list-table td,
  .quote-line-output,
  .engineered-additional-lf,
  .engineered-additional-empty {
    background: #f8f8f4;
  }

  .cat-input,
  .cat-select,
  .size-qty-input,
  .quote-line-input,
  .engineered-additional-input,
  .qty-input,
  .order-len-input {
    background: #ffffff;
    border-color: var(--control-line);
    color: var(--ink);
  }

  .cat-input:focus,
  .cat-select:focus,
  .size-qty-input:focus,
  .quote-line-input:focus,
  .engineered-additional-input:focus,
  .qty-input:focus,
  .order-len-input:focus {
    background: #ffffff;
    border-color: var(--safety);
    outline-color: var(--safety);
  }

  .size-table--matrix thead th,
  .engineered-additional-table th,
  .product-list-table th,
  .quote-rail-head,
  .stock-board-head,
  .loc-banner,
  .order-table caption,
  .prod-modal .pm-head {
    background: var(--safety-deep);
    color: #ffffff;
    border-bottom-color: var(--safety);
  }

  .size-table--matrix tbody th {
    background: #eef1ec;
    color: var(--ink);
  }

  .quote-line-name span,
  .quote-line-name em,
  .field-note,
  .page-hero .lede,
  .section-lede,
  .section-concrete .section-lede,
  .section-dark .section-lede,
  .section-panel .section-lede,
  .product-card p,
  .category-proof,
  .prod-card .p-meta,
  .prod-card .p-uom,
  .quote-disclaimer {
    color: var(--ink-muted);
  }

  .cta-panel {
    background: var(--safety-deep);
    border-color: var(--safety-deep);
    color: #ffffff;
    box-shadow: 12px 12px 0 rgba(7, 31, 27, 0.18);
  }

  .cta-panel p {
    color: #dfe9e4;
  }

  .cta-stamp {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--safety-deep);
  }

  .stock-board-note,
  .stock-list a:hover,
  .order-contact-link:hover {
    background: var(--brand-mint);
    color: var(--safety-deep);
  }

  .p-model,
  .prod-card:hover .p-model,
  .pm-stage {
    background:
      radial-gradient(ellipse 62% 46% at 50% 78%, rgba(7, 31, 27, 0.14), transparent 70%),
      linear-gradient(170deg, #ffffff, #eef1ec);
  }

  .pm-hint {
    background: linear-gradient(transparent, rgba(238, 241, 236, 0.92) 45%);
  }
}

@media screen and (max-width: 780px) {
  .quote-line-row--structured.quote-line-row--with-lf,
  .quote-line-row--fields-1.quote-line-row--with-lf,
  .quote-line-row--fields-2.quote-line-row--with-lf,
  .quote-line-row--fields-3.quote-line-row--with-lf,
  .quote-line-row--rimboard-lf {
    grid-template-columns: 1fr;
  }
}

@media screen {
  /* Brand reset v4: family-crest yard plaque with the big A-1 restored. */
  .brand-mark--crest {
    position: relative;
    width: 4.4rem;
    height: 5rem;
    flex: 0 0 auto;
    display: block;
    overflow: visible;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
    background: var(--brand-ink);
    color: var(--brand-ink);
    box-shadow: 0.28rem 0.28rem 0 var(--safety);
  }
  .brand-mark--crest::before {
    content: "";
    position: absolute;
    inset: 0.35rem 0.36rem 0.56rem;
    z-index: 0;
    clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
    background: var(--brand-paper);
  }
  .brand-mark--crest::after {
    content: "RONK.";
    position: absolute;
    top: 0.46rem;
    left: 50%;
    z-index: 2;
    width: 2.58rem;
    padding: 0.07rem 0 0.08rem;
    background: var(--brand-ink);
    color: var(--safety);
    font-family: var(--font-mono);
    font-size: 0.35rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-align: center;
    transform: translateX(-50%);
  }
  .brand-mark--crest .mark-main {
    position: absolute;
    left: 50%;
    top: 47%;
    z-index: 3;
    display: flex;
    align-items: baseline;
    gap: 0.04em;
    color: var(--brand-ink);
    font-family: var(--font-display);
    font-size: 2.46rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.76;
    transform: translate(-50%, -50%);
  }
  .brand-mark--crest .mark-main span:first-child {
    transform: skew(-8deg);
  }
  .brand-mark--crest .mark-main span:last-child {
    font-family: var(--font-body);
    font-size: 0.88em;
    font-weight: 900;
  }
  .brand-mark--crest .mark-dash,
  .hero-mark-main .mark-dash {
    align-self: center;
    width: 0.23em;
    height: 0.08em;
    background: var(--safety);
    box-shadow: 0 0 0 1px var(--brand-ink);
    transform: translateY(-0.04em);
  }
  .brand-mark--crest .mark-planks {
    position: absolute;
    left: 0.62rem;
    right: 0.62rem;
    bottom: 1rem;
    z-index: 2;
    height: 0.3rem;
    border-top: 1px solid var(--brand-ink);
    border-bottom: 1px solid var(--brand-ink);
    background:
      repeating-linear-gradient(90deg, var(--brand-ink) 0 0.2rem, transparent 0.2rem 0.52rem),
      var(--wood-warm);
    transform: none;
  }
  .brand-mark--crest .mark-planks::before {
    display: none;
  }
  .brand-mark--crest .mark-label {
    position: absolute;
    left: 50%;
    bottom: 0.38rem;
    z-index: 3;
    display: block;
    min-width: 2rem;
    padding: 0.1rem 0.26rem;
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
    background: var(--safety);
    color: var(--brand-ink);
    font-family: var(--font-mono);
    font-size: 0.39rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
    text-align: center;
    writing-mode: horizontal-tb;
    transform: translateX(-50%);
  }

  .site-header .nav-bar {
    align-items: center;
    flex-wrap: nowrap;
    gap: 1.1rem;
    padding: 0.7rem 0;
  }
  .site-header .brand {
    flex: 0 0 auto;
    min-width: 0;
    gap: 0.72rem;
  }
  .site-header .brand-mark--crest {
    width: 3.82rem;
    height: 4.34rem;
    box-shadow: 0.22rem 0.22rem 0 var(--safety);
  }
  .site-header .brand-mark--crest::before {
    inset: 0.3rem 0.31rem 0.48rem;
  }
  .site-header .brand-mark--crest::after {
    top: 0.39rem;
    width: 2.18rem;
    font-size: 0.3rem;
  }
  .site-header .brand-mark--crest .mark-main {
    font-size: 2.1rem;
  }
  .site-header .brand-mark--crest .mark-planks {
    left: 0.54rem;
    right: 0.54rem;
    bottom: 0.86rem;
    height: 0.25rem;
  }
  .site-header .brand-mark--crest .mark-label {
    bottom: 0.31rem;
    font-size: 0.34rem;
  }
  .site-header .brand-mark--crest::after,
  .site-header .brand-mark--crest .mark-label {
    display: none;
  }
  .site-header .brand-mark--crest .mark-main {
    top: 47%;
  }
  .site-header .brand-mark--crest .mark-planks {
    bottom: 0.68rem;
  }
  .site-header .brand-name {
    max-width: none;
    font-size: 2.02rem;
    letter-spacing: 0.01em;
    line-height: 0.88;
    white-space: nowrap;
  }
  .site-header .brand-name small {
    margin-top: 0.35rem;
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    white-space: nowrap;
  }
  .site-header nav {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
  }
  .site-header .nav-links {
    flex-wrap: nowrap;
    justify-content: flex-end;
    row-gap: 0;
  }
  .site-header .nav-links a {
    padding: 0.5rem 0.48rem;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
  }
  .site-header .nav-cta {
    margin-left: 0.2rem;
    padding: 0.66rem 0.78rem;
  }

  .hero-company-mark {
    position: relative;
    display: block;
    width: clamp(12rem, 16vw, 15.8rem);
    height: clamp(13.4rem, 18vw, 17.2rem);
    margin: 0 0 clamp(1.35rem, 3vh, 2rem);
    overflow: visible;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
    background: var(--brand-ink);
    box-shadow: 0.52rem 0.52rem 0 var(--safety);
  }
  .hero-company-mark::before {
    content: "";
    position: absolute;
    inset: 0.86rem 0.88rem 1.42rem;
    z-index: 0;
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
    background: var(--brand-paper);
    box-shadow: none;
  }
  .hero-company-mark::after {
    content: "RONKONKOMA  N.Y.";
    position: absolute;
    top: 1.02rem;
    left: 50%;
    z-index: 2;
    width: min(10.5rem, calc(100% - 3rem));
    padding: 0.18rem 0 0.2rem;
    background: var(--brand-ink);
    color: var(--safety);
    font-family: var(--font-mono);
    font-size: clamp(0.56rem, 0.72vw, 0.72rem);
    font-weight: 900;
    letter-spacing: 0.18em;
    line-height: 1;
    text-align: center;
    transform: translateX(-50%);
  }
  .hero-mark-main {
    position: absolute;
    left: 50%;
    top: 45.5%;
    z-index: 3;
    display: flex;
    align-items: baseline;
    gap: 0.035em;
    padding: 0;
    color: var(--brand-ink);
    font-family: var(--font-display);
    font-size: clamp(6.55rem, 10.4vw, 9.7rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.74;
    transform: translate(-50%, -50%);
  }
  .hero-mark-main span:first-child {
    transform: skew(-8deg);
  }
  .hero-mark-main span:last-child {
    font-family: var(--font-body);
    font-size: 0.88em;
    font-weight: 900;
  }
  .hero-mark-side {
    position: absolute;
    left: 50%;
    bottom: 2.12rem;
    z-index: 4;
    display: block;
    width: min(12.2rem, calc(100% - 2.2rem));
    max-width: none;
    padding: 0.34rem 0.5rem;
    border: 0;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
    background: rgba(17, 22, 17, 0.92);
    box-shadow: none;
    color: rgba(255, 250, 240, 0.78);
    font-family: var(--font-mono);
    font-size: clamp(0.48rem, 0.7vw, 0.66rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    transform: translateX(-50%);
  }

  @media (max-width: 1080px) {
    .site-header .nav-bar {
      flex-wrap: wrap;
      align-items: center;
    }
    .site-header nav {
      flex-basis: 100%;
      margin-left: 0;
    }
    .site-header .nav-links {
      justify-content: flex-start;
    }
  }

  @media (max-width: 640px) {
    .brand-mark--crest,
    .site-header .brand-mark--crest {
      width: 3.15rem;
      height: 3.62rem;
      box-shadow: 0.16rem 0.16rem 0 var(--safety);
    }
    .brand-mark--crest::before,
    .site-header .brand-mark--crest::before {
      inset: 0.24rem 0.25rem 0.4rem;
    }
    .brand-mark--crest::after,
    .site-header .brand-mark--crest::after {
      top: 0.31rem;
      width: 1.76rem;
      padding: 0.05rem 0 0.06rem;
      font-size: 0.23rem;
      letter-spacing: 0.1em;
    }
    .brand-mark--crest .mark-main,
    .site-header .brand-mark--crest .mark-main {
      font-size: 1.7rem;
    }
    .brand-mark--crest .mark-planks,
    .site-header .brand-mark--crest .mark-planks {
      left: 0.45rem;
      right: 0.45rem;
      bottom: 0.72rem;
      height: 0.19rem;
    }
    .brand-mark--crest .mark-label,
    .site-header .brand-mark--crest .mark-label {
      bottom: 0.25rem;
      min-width: 1.52rem;
      padding: 0.07rem 0.16rem;
      font-size: 0.25rem;
      letter-spacing: 0.08em;
    }
    .site-header .brand {
      gap: 0.52rem;
    }
    .site-header .brand-name {
      max-width: calc(100vw - 5.55rem);
      overflow: visible;
      font-size: 1rem;
      letter-spacing: 0;
      line-height: 0.92;
      white-space: nowrap;
    }
    .site-header .brand-name small {
      font-size: 0.4rem;
      letter-spacing: 0.075em;
    }
    .hero-company-mark {
      width: 8.55rem;
      height: 9.75rem;
      box-shadow: 0.32rem 0.32rem 0 var(--safety);
    }
    .hero-company-mark::before {
      inset: 0.62rem 0.64rem 0.98rem;
    }
    .hero-company-mark::after {
      top: 0.74rem;
      width: 5.7rem;
      padding: 0.13rem 0 0.14rem;
      font-size: 0.38rem;
      letter-spacing: 0.11em;
    }
    .hero-mark-main {
      top: 45.5%;
      font-size: 4.55rem;
    }
    .hero-mark-side {
      bottom: 1.42rem;
      width: 7.05rem;
      padding: 0.25rem 0.34rem;
      font-size: 0.36rem;
      letter-spacing: 0.08em;
    }
  }
}

@media screen {
  /* Final brand layer: the business-card logo and sampled ink win the cascade. */
  :root {
    --safety: #123f37;
    --safety-deep: #071f1b;
    --brand-ink: #123f37;
    --brand-paper: #f8faf4;
    --brand-mint: #dcebe5;
  }

  body { background: var(--brand-paper); }
  .site-header { background: rgba(248, 250, 244, 0.98); border-bottom-color: rgba(18, 63, 55, 0.18); }
  .caution-stripe,
  .site-header::before,
  .scroll-progress { background: var(--safety); }

  .brand-mark--card,
  .site-header .brand-mark--card {
    display: block;
    width: 5.9rem;
    height: 3.85rem;
    min-width: 5.9rem;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--brand-ink);
  }

  .brand-mark--card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .site-footer .brand-mark--card {
    width: 7.3rem;
    height: 4.75rem;
    min-width: 7.3rem;
  }

  /* A slim numeral with a small angled top, balanced with the company lettering. */
  .brand-name .brand-numeral {
    display: inline-block;
    width: 0.424em;
    height: 0.8em;
    vertical-align: baseline;
  }
  .brand-numeral svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  .site-header .brand-name { color: var(--safety-deep); }
  .site-header .brand-name small { color: var(--brand-ink); }
  .nav-links a[aria-current="page"] { color: var(--brand-ink); border-bottom-color: var(--brand-ink); }
  .nav-drop-all:hover { color: var(--brand-ink) !important; }

  .nav-cta,
  .btn-primary,
  .skip-link,
  .mobile-bar .bar-cta,
  .hero-titleblock .hot,
  .hero-brand-subtitle,
  .btn-add.is-added,
  .pager button.is-current,
  .section-eyebrow .sheet-no {
    background: var(--safety) !important;
    border-color: var(--safety) !important;
    color: #fffef9 !important;
  }

  .nav-cta,
  .btn-primary,
  .mobile-bar .bar-cta {
    box-shadow: 0.34rem 0.34rem 0 rgba(7, 31, 27, 0.22);
  }

  .btn-primary:hover,
  .nav-cta:hover,
  .mobile-bar .bar-cta:hover {
    background: var(--safety-deep) !important;
    color: #fffef9 !important;
  }

  .hero-brand-hero {
    background:
      linear-gradient(115deg, transparent 0 56%, rgba(18, 63, 55, 0.09) 56% 68%, var(--brand-ink) 68% 100%),
      var(--brand-paper);
    color: var(--safety-deep);
  }

  .hero-card-lockup,
  .hero-brand-hero .hero-card-lockup {
    display: block;
    width: min(38rem, 100%);
    height: auto;
    min-height: 0;
    margin: 0 0 clamp(1.25rem, 3vh, 1.9rem);
    overflow: visible;
    clip-path: none;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .hero-card-lockup::before,
  .hero-card-lockup::after,
  .hero-brand-hero .hero-card-lockup::before,
  .hero-brand-hero .hero-card-lockup::after {
    display: none;
  }

  .hero-card-lockup img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0.42rem 0.42rem 0 rgba(18, 63, 55, 0.1));
  }

  .hero-brand-hero h1,
  .hero-brand-hero h1 .stamp-line > span,
  .hero-brand-hero h1 .stamp-line:nth-child(3) > span {
    color: var(--safety-deep);
    text-shadow: none;
  }

  .hero-brand-hero h1 .stamp-line:nth-child(3) > span {
    padding-inline: 0.04em;
    margin-inline-start: -0.04em;
    background: linear-gradient(180deg, transparent 0 58%, rgba(18, 63, 55, 0.16) 58% 92%, transparent 92% 100%);
  }

  .hero-titleblock { border-color: rgba(18, 63, 55, 0.25); box-shadow: 8px 8px 0 rgba(18, 63, 55, 0.1); }
  .hero-titleblock span { border-right-color: rgba(18, 63, 55, 0.25); }
  .loc-chip { border-color: rgba(18, 63, 55, 0.38); color: var(--safety-deep); }
  .loc-chip svg { color: var(--brand-ink); }
  .loc-chip:hover { background: var(--safety); border-color: var(--safety); color: #fffef9; }
  .division .div-list li::before,
  .spec-tag,
  .card .spec-tag,
  .p-contact,
  .field-note a,
  .legal-body a { color: var(--brand-ink); }
  .section-dark .bom b,
  .section-panel .bom b,
  .section-dark .loc-line svg,
  .section-panel .loc-line svg,
  .footer-grid h2,
  .footer-grid a:hover,
  .footer-bottom a:hover { color: var(--brand-mint); }

  .hero .ghost-word,
  .brand-showcase::before {
    color: rgba(18, 63, 55, 0.11);
  }

  .yard-category-board {
    position: relative;
    align-self: center;
    width: min(34rem, 100%);
    margin-inline-start: auto;
    border: 3px solid var(--safety-deep);
    background: #fffef9;
    color: var(--safety-deep);
    box-shadow: 0.82rem 0.82rem 0 rgba(7, 31, 27, 0.42);
    transform: rotate(0.35deg);
  }

  .yard-category-board::before {
    content: "";
    position: absolute;
    left: 1.15rem;
    right: 1.15rem;
    top: -0.6rem;
    height: 0.72rem;
    background: var(--brand-mint);
    border: 2px solid var(--safety-deep);
  }

  .stock-board-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.2rem 1rem;
    background: var(--safety-deep);
    color: #fffef9;
  }

  .stock-board-head span {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .stock-board-head strong {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.7rem);
    font-weight: 900;
    line-height: 0.82;
    text-align: right;
    text-transform: uppercase;
  }

  .stock-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stock-list a {
    min-width: 0;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.68rem;
    min-height: 4.4rem;
    padding: 0.72rem 0.85rem;
    border-right: 1px solid rgba(18, 63, 55, 0.22);
    border-bottom: 1px solid rgba(18, 63, 55, 0.22);
    background: #fffef9;
    color: var(--safety-deep);
    text-decoration: none;
    transition: background 0.16s var(--ease-out), color 0.16s var(--ease-out), transform 0.16s var(--ease-out);
  }

  .stock-list a:nth-child(even) {
    border-right: 0;
  }

  .stock-list a:nth-child(4n+2),
  .stock-list a:nth-child(4n+3) {
    background: var(--brand-paper);
  }

  .stock-list a:hover {
    position: relative;
    z-index: 1;
    background: var(--brand-mint);
    transform: translate(-0.12rem, -0.12rem);
  }

  .stock-list span {
    display: grid;
    place-items: center;
    width: 2.22rem;
    height: 2.22rem;
    border: 2px solid var(--safety-deep);
    background: var(--safety);
    color: #fffef9;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;
  }

  .stock-list b {
    overflow-wrap: anywhere;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.7vw, 1.45rem);
    font-weight: 900;
    line-height: 0.94;
    text-transform: uppercase;
  }

  .stock-list--photo {
    gap: 0;
    background: rgba(18, 63, 55, 0.16);
  }

  .stock-list--photo a,
  .stock-list--photo a:nth-child(even) {
    grid-template-columns: 4.55rem minmax(0, 1fr);
    min-height: 5.55rem;
    padding: 0.72rem 0.82rem;
    background: #fffef9;
    border-right: 1px solid rgba(18, 63, 55, 0.18);
    border-bottom: 1px solid rgba(18, 63, 55, 0.18);
  }

  .stock-list--photo a:nth-child(even) {
    border-right: 0;
  }

  .stock-list--photo a:nth-child(4n+2),
  .stock-list--photo a:nth-child(4n+3) {
    background: #fffef9;
  }

  .stock-list--photo a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .stock-list--photo a:hover {
    background: var(--brand-mint);
  }

  .stock-list--photo img {
    width: 4.05rem;
    height: 4.05rem;
    object-fit: cover;
    border: 1px solid rgba(18, 63, 55, 0.2);
    filter: saturate(0.9) contrast(0.98);
  }

  .stock-list--photo b {
    color: var(--safety-deep);
    font-family: var(--font-mono);
    font-size: clamp(0.84rem, 1.23vw, 1.1rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.1;
  }

  .stock-board-note {
    margin: 0;
    padding: 1rem 1.2rem 1.1rem;
    border-top: 3px solid var(--safety-deep);
    background: var(--brand-mint);
    color: var(--safety-deep);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
  }

  @media (max-width: 1080px) {
    .site-header .brand-mark--card {
      width: 5.55rem;
      height: 3.6rem;
      min-width: 5.55rem;
    }
  }

  @media (max-width: 640px) {
    .site-header .brand-mark--card {
      width: 4.65rem;
      height: 3rem;
      min-width: 4.65rem;
    }

    .site-footer .brand-mark--card {
      width: 6.2rem;
      height: 4.05rem;
      min-width: 6.2rem;
    }

    .hero-card-lockup,
    .hero-brand-hero .hero-card-lockup {
      width: min(18.6rem, 100%);
      margin-bottom: 0.85rem;
    }

    .hero-brand-hero h1 {
      font-size: clamp(2.85rem, 13.5vw, 4.2rem);
      line-height: 0.82;
    }

    .hero-brand-hero .hero-sub {
      margin: 1rem 0 0.9rem;
      font-size: 1rem;
    }

    .hero-brand-hero .hero-proof li {
      padding: 0.78rem 0.85rem;
    }

    .hero-brand-hero .hero-actions {
      margin-top: 1.15rem;
    }

    .yard-category-board {
      width: 100%;
      margin-top: 5.1rem;
      box-shadow: 0.45rem 0.45rem 0 rgba(7, 31, 27, 0.34);
      transform: none;
    }

    .stock-board-head {
      align-items: start;
      flex-direction: column;
    }

    .stock-board-head strong {
      text-align: left;
    }

    .stock-list {
      grid-template-columns: 1fr;
    }

    .stock-list a,
    .stock-list a:nth-child(even) {
      border-right: 0;
    }

    .stock-list a {
      min-height: 3.65rem;
      grid-template-columns: 2.25rem minmax(0, 1fr);
      padding: 0.6rem 0.72rem;
    }

    .stock-list span {
      width: 1.92rem;
      height: 1.92rem;
      font-size: 0.64rem;
    }

    .stock-list b {
      font-size: 1rem;
      line-height: 0.98;
    }

    .stock-list--photo a,
    .stock-list--photo a:nth-child(even) {
      grid-column: auto;
      grid-template-columns: 4rem minmax(0, 1fr);
      min-height: 4.72rem;
      padding: 0.55rem 0.7rem;
      border-right: 0;
    }

    .stock-list--photo img {
      width: 3.45rem;
      height: 3.45rem;
    }

    .stock-list--photo b {
      font-size: 0.86rem;
      line-height: 1.12;
    }

    .home-page .hero-proof {
      display: none;
    }

    .home-page .loc-chips {
      display: none;
    }

    .home-page .hero-actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.55rem;
    }

    .home-page .hero-actions .btn {
      min-height: 3.25rem;
      padding-inline: 0.62rem;
      font-size: 0.78rem;
    }

    .home-page .hero-actions .btn svg {
      width: 1rem;
      height: 1rem;
    }

    .nav-links a[aria-current="page"] {
      background: var(--safety) !important;
      border-color: var(--safety) !important;
      color: #fffef9 !important;
    }
  }
}

@media screen {
  /* Final palette cleanup: white first, dark green for weight, soft mint as the second green. */
  :root {
    --safety: #dcebe5;
    --safety-deep: #071f1b;
    --brand-ink: #123f37;
    --brand-paper: #ffffff;
    --brand-mint: #eef6f1;
    --paper: #ffffff;
    --paper-2: #f7f8f5;
    --concrete: #ffffff;
    --concrete-2: #f7f8f5;
    --gunmetal: #f7f8f5;
    --form-ply: #f4f7f2;
    --vest-soft: #eef5f0;
    --galvanized: #eef2ee;
    --control-line: #b8c6bd;
    --steel-line: rgba(7, 31, 27, 0.18);
    --steel-text: #183a33;
    --steel-dim: #566b64;
    --ink: #071f1b;
    --ink-muted: #4a5f58;
  }

  body,
  .legal-hero,
  .page-hero,
  .section-concrete,
  .section-dark,
  .section-panel {
    background: #ffffff !important;
    color: var(--ink);
  }

  .site-header {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom-color: rgba(18, 63, 55, 0.18) !important;
  }

  .hero-brand-hero {
    background:
      linear-gradient(115deg, transparent 0 67%, rgba(18, 63, 55, 0.07) 67% 76%, var(--brand-ink) 76% 100%),
      #ffffff !important;
  }

  .section-panel,
  .product-card,
  .prod-card,
  .size-guide,
  .quote-size-matrix,
  .quote-product-builder,
  .quote-line-row,
  .product-list-builder,
  .engineered-additional,
  .quote-checkout-list,
  .quote-summary,
  .size-panel,
  .card,
  .division,
  .process-step,
  .loc-card,
  .yard-category-board,
  .stock-list a,
  .stock-list--photo a,
  .stock-list--photo a:nth-child(even),
  .stock-list--photo a:nth-child(4n+2),
  .stock-list--photo a:nth-child(4n+3) {
    background: #ffffff !important;
    color: var(--ink);
  }

  .nav-cta,
  .btn-primary,
  .mobile-bar .bar-cta,
  .quote-file::file-selector-button {
    background: var(--brand-ink) !important;
    border-color: var(--brand-ink) !important;
    color: #ffffff !important;
    box-shadow: 0.28rem 0.28rem 0 var(--safety) !important;
  }

  .btn-primary:hover,
  .nav-cta:hover,
  .mobile-bar .bar-cta:hover,
  .quote-file::file-selector-button:hover {
    background: var(--safety-deep) !important;
    border-color: var(--safety-deep) !important;
    color: #ffffff !important;
  }

  .brand-lede-strip span,
  .hero-brand-subtitle,
  .hero-titleblock .hot,
  .section-eyebrow .sheet-no,
  .stock-list span,
  .cat-chip.is-active,
  .pager button.is-current,
  .btn-add.is-added,
  .skip-link,
  .nav-links a[aria-current="page"],
  .quote-rail-count-badge,
  .spec-check {
    background: var(--safety) !important;
    border-color: var(--brand-ink) !important;
    color: var(--brand-ink) !important;
  }

  .size-table--matrix thead th,
  .engineered-additional-table th,
  .product-list-table th,
  .quote-rail-head,
  .stock-board-head,
  .loc-banner,
  .order-table caption,
  .prod-modal .pm-head,
  .cta-panel {
    background: var(--brand-ink) !important;
    border-color: var(--brand-ink) !important;
    color: #ffffff !important;
  }

  .cat-input,
  .cat-select,
  .size-qty-input,
  .quote-line-input,
  .product-list-input,
  .engineered-additional-input,
  .qty-input,
  .order-len-input {
    background: #ffffff !important;
    border-color: var(--control-line) !important;
    color: var(--ink) !important;
  }

  .cat-input:focus,
  .cat-select:focus,
  .size-qty-input:focus,
  .quote-line-input:focus,
  .product-list-input:focus,
  .engineered-additional-input:focus,
  .qty-input:focus,
  .order-len-input:focus {
    background: #ffffff !important;
    border-color: var(--brand-ink) !important;
    outline-color: var(--safety) !important;
  }

  .size-matrix-wrap,
  .quote-line-output,
  .product-list-table td,
  .engineered-additional-table td,
  .engineered-additional-lf,
  .engineered-additional-empty,
  .size-table--matrix tbody th,
  .stock-board-note,
  .stock-list a:hover,
  .order-contact-link:hover {
    background: var(--brand-mint) !important;
    color: var(--ink) !important;
  }

  .field-note a,
  .legal-body a,
  .category-resource:hover,
  .prod-card .p-name button:hover,
  .q-remove,
  .product-card .sub,
  .prod-card .p-sku,
  .size-panel h4 {
    color: var(--brand-ink) !important;
  }

  .page-hero .lede,
  .section-lede,
  .product-card p,
  .category-proof,
  .prod-card .p-meta,
  .prod-card .p-uom,
  .field-note,
  .quote-disclaimer {
    color: var(--ink-muted) !important;
  }

  .page-hero--products {
    background:
      linear-gradient(115deg, rgba(220, 235, 229, 0.1) 0 32%, transparent 32% 100%),
      var(--brand-ink) !important;
    color: #ffffff !important;
  }

  .page-hero--products .ghost-word {
    color: rgba(220, 235, 229, 0.09) !important;
  }

  .page-hero--products h1,
  .page-hero--products .section-eyebrow,
  .page-hero--products .section-eyebrow .sheet-title {
    color: #ffffff !important;
  }

  .page-hero--products .lede {
    color: rgba(255, 255, 255, 0.82) !important;
  }

  .page-hero--products .brand-lede-strip span {
    background: rgba(220, 235, 229, 0.12) !important;
    border-color: rgba(220, 235, 229, 0.35) !important;
    color: #ffffff !important;
  }

  .page-hero--products .product-hero-media {
    padding: 0.65rem;
    background: rgba(7, 31, 27, 0.42);
    border: 1px solid rgba(220, 235, 229, 0.24);
  }

  .page-hero--products .product-hero-shot {
    border-color: rgba(220, 235, 229, 0.24) !important;
    background: var(--safety-deep) !important;
    box-shadow: none !important;
  }

  .page-hero--products .product-hero-shot figcaption {
    background: linear-gradient(to top, rgba(7, 31, 27, 0.92), rgba(7, 31, 27, 0));
  }

  .section-concrete.product-taxonomy-section {
    background: linear-gradient(180deg, var(--brand-mint) 0, #ffffff 18rem) !important;
  }

  .product-taxonomy-section .section-head {
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(18, 63, 55, 0.16);
  }

  .product-taxonomy-section .product-card--category {
    border: 1px solid rgba(18, 63, 55, 0.18) !important;
    border-top: 4px solid var(--brand-ink) !important;
    box-shadow: none !important;
  }

  .product-taxonomy-section .product-card--category:nth-child(even) {
    border-top-color: #86a99b !important;
  }

  .product-taxonomy-section .category-photo-link {
    background: var(--brand-mint) !important;
  }

  .product-taxonomy-section .category-sublist a,
  .product-taxonomy-section .category-sublist span,
  .product-taxonomy-section .brand-stack li {
    background: var(--brand-mint) !important;
    border-color: rgba(18, 63, 55, 0.2) !important;
    color: var(--brand-ink) !important;
  }

  .product-taxonomy-section .category-quote {
    background: var(--brand-ink) !important;
    border-color: var(--brand-ink) !important;
    color: #ffffff !important;
  }
}

@media screen {
  /* Uniformity layer: one A1 page grammar across interior pages. */
  :root {
    --a1-line: rgba(18, 63, 55, 0.24);
    --a1-line-soft: rgba(18, 63, 55, 0.14);
    --a1-shadow: 0.28rem 0.28rem 0 rgba(18, 63, 55, 0.09);
  }

  .page-hero,
  .legal-hero,
  .page-hero--products {
    background:
      linear-gradient(115deg, rgba(220, 235, 229, 0.13) 0 31%, transparent 31% 100%),
      var(--brand-ink) !important;
    border-bottom: 0.38rem solid var(--safety) !important;
    color: #ffffff !important;
  }

  .page-hero .ghost-word {
    color: rgba(220, 235, 229, 0.1) !important;
  }

  .page-hero h1,
  .legal-hero h1,
  .page-hero .section-title,
  .page-hero .section-eyebrow,
  .page-hero .section-eyebrow .sheet-title {
    color: #ffffff !important;
  }

  .page-hero .lede,
  .legal-hero .updated {
    color: rgba(255, 255, 255, 0.82) !important;
  }

  .page-hero .section-eyebrow .sheet-title,
  .legal-hero .updated,
  .section-eyebrow .sheet-title {
    background: var(--safety) !important;
    color: var(--brand-ink) !important;
    padding: 0.32rem 0.45rem !important;
  }

  .section-eyebrow {
    border: 0 !important;
    color: var(--brand-ink) !important;
  }

  .section-concrete,
  .section-panel,
  .section-dark {
    background: #ffffff !important;
    color: var(--ink) !important;
  }

  .section-concrete:nth-of-type(even),
  .section-panel:nth-of-type(even) {
    background: linear-gradient(180deg, var(--brand-mint), #ffffff 18rem) !important;
  }

  .card,
  .division,
  .process-step,
  .loc-card,
  .product-card,
  .prod-card,
  .legal-callout,
  .size-guide,
  .quote-size-matrix,
  .quote-product-builder,
  .product-list-builder,
  .engineered-additional,
  .quote-summary,
  .quote-checkout-list,
  .stock-list a,
  .stock-list--photo a {
    border: 1px solid var(--a1-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .card,
  .division,
  .process-step,
  .loc-card,
  .product-card,
  .prod-card,
  .legal-callout {
    border-top: 4px solid var(--brand-ink) !important;
  }

  .card:hover,
  .loc-card:hover,
  .product-card:hover,
  .prod-card:hover,
  .stock-list a:hover,
  .stock-list--photo a:hover {
    background: var(--brand-mint) !important;
    box-shadow: var(--a1-shadow) !important;
  }

  .btn,
  .nav-cta,
  .category-quote,
  .btn-add,
  .q-remove,
  .engineered-additional-add,
  .mobile-bar .bar-cta,
  .quote-file::file-selector-button {
    border-radius: 0 !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  .btn-primary,
  .btn-dark,
  .nav-cta,
  .category-quote,
  .btn-add,
  .mobile-bar .bar-cta,
  .quote-file::file-selector-button {
    background: var(--brand-ink) !important;
    border-color: var(--brand-ink) !important;
    color: #ffffff !important;
  }

  .btn-primary:hover,
  .btn-dark:hover,
  .nav-cta:hover,
  .category-quote:hover,
  .btn-add:hover,
  .mobile-bar .bar-cta:hover,
  .quote-file::file-selector-button:hover {
    background: var(--safety-deep) !important;
    border-color: var(--safety-deep) !important;
    color: #ffffff !important;
  }

  .btn-ghost,
  .q-remove,
  .engineered-additional-add {
    background: #ffffff !important;
    border-color: var(--brand-ink) !important;
    color: var(--brand-ink) !important;
  }

  .btn-ghost:hover,
  .q-remove:hover,
  .engineered-additional-add:hover {
    background: var(--safety) !important;
    color: var(--brand-ink) !important;
  }

  .size-table--matrix thead th,
  .engineered-additional-table th,
  .product-list-table th,
  .stock-board-head,
  .quote-rail-head,
  .loc-banner {
    background: var(--brand-ink) !important;
    border-color: var(--brand-ink) !important;
    color: #ffffff !important;
  }

  .size-table--matrix td,
  .engineered-additional-table td,
  .product-list-table td,
  .quote-line-output,
  .engineered-additional-lf {
    background: var(--brand-mint) !important;
    border-color: var(--a1-line-soft) !important;
  }

  .cat-input,
  .cat-select,
  .size-qty-input,
  .quote-line-input,
  .product-list-input,
  .engineered-additional-input,
  .qty-input,
  .order-len-input {
    border-color: var(--a1-line) !important;
  }

  .product-taxonomy-section .product-card--category:nth-child(even) {
    border-top-color: var(--brand-ink) !important;
  }

  .product-taxonomy-section .category-photo-link,
  .product-taxonomy-section .category-sublist a,
  .product-taxonomy-section .category-sublist span,
  .product-taxonomy-section .brand-stack li,
  .brand-lede-strip span,
  .stock-list span,
  .cat-chip.is-active,
  .pager button.is-current,
  .quote-rail-count-badge,
  .spec-check {
    background: var(--safety) !important;
    border-color: var(--a1-line) !important;
    color: var(--brand-ink) !important;
  }

  .home-page .hero-brand-hero h1 {
    display: grid;
    gap: clamp(0.14em, 0.8vw, 0.22em);
    line-height: 0.86;
  }

  .page-hero--products .product-hero-media {
    background: rgba(7, 31, 27, 0.36) !important;
    border-color: rgba(220, 235, 229, 0.32) !important;
  }
}

/* Keep the quote drawer legible after the shared brand theme overrides. */
@media screen {
  .quote-rail .quote-rail-head {
    flex-wrap: wrap;
    padding: 0.65rem;
  }
  .quote-rail .quote-rail-count-badge {
    background: #ffffff !important;
    color: var(--brand-ink) !important;
  }
  .quote-rail .q-remove:hover,
  .quote-rail .q-remove:focus-visible {
    background: var(--brand-ink) !important;
    color: #ffffff !important;
  }
  .quote-rail .quote-rail-tab:focus-visible {
    outline-color: #ffffff;
  }
}

/* Email contact works without a configured desktop mail app. */
.email-contact-card { scroll-margin-top: 7rem; }
.email-contact-card:target { outline: 2px solid var(--brand-ink); outline-offset: 4px; }
.email-contact-card p { font-size: 1rem; }
.email-contact-label {
  display: block;
  margin: 1.25rem 0 0.4rem;
  color: var(--brand-ink);
  font-size: 0.875rem;
  font-weight: 600;
}
.email-contact-address {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0.7rem;
  border: 1px solid var(--control-line);
  border-radius: 0;
  background: #ffffff;
  color: var(--brand-ink);
  font: inherit;
  font-size: 1rem;
}
.email-contact-copy {
  min-height: 44px;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  color: var(--brand-ink);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.email-contact-copy[hidden] { display: none; }
.email-contact-card .email-contact-status { font-size: 0.875rem; }
.email-contact-status:empty { display: none; }
.email-contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 1rem 0;
}
.email-contact-card .email-contact-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 0.5rem;
  background: var(--brand-ink);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}
.email-contact-choice:hover { filter: brightness(1.15); }
.email-contact-help a { text-decoration: underline; text-underline-offset: 0.2em; }