/* ============================================================
   RED DESERT METAL SOLUTIONS — design system
   Materials: PAPER (sand job-ticket), IRON (the metal),
   OXIDE (red primer — the color the trade actually paints steel).
   Motion: machine-tool. Things arrive already settled.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  /* layer 1 — primitives (OKLCH) */
  --sand-100: oklch(0.945 0.020 84);   /* paper            */
  --sand-200: oklch(0.905 0.026 82);   /* paper, sunken    */
  --sand-300: oklch(0.860 0.032 78);   /* rules on paper   */
  --sand-400: oklch(0.700 0.040 72);   /* muted on paper   */
  --iron-900: oklch(0.170 0.011 55);   /* footer iron      */
  --iron-800: oklch(0.210 0.012 55);   /* section iron     */
  --iron-700: oklch(0.255 0.014 55);   /* raised on iron   */
  --iron-600: oklch(0.340 0.016 55);   /* rules on iron    */
  --iron-450: oklch(0.520 0.020 60);   /* muted on iron — large text only */
  --iron-300: oklch(0.780 0.020 70);   /* soft text on iron*/
  --oxide-600: oklch(0.435 0.135 33);  /* brand oxide      */
  --oxide-500: oklch(0.500 0.150 35);  /* oxide, lifted    */
  --oxide-400: oklch(0.600 0.145 38);  /* oxide on iron    */
  --oxide-700: oklch(0.370 0.115 32);  /* oxide, pressed   */

  /* layer 2 — semantics (light/paper context is the default) */
  --surface:        var(--sand-100);
  --surface-sunken: var(--sand-200);
  --text:           var(--iron-800);
  --text-muted:     oklch(0.400 0.020 60);
  --border:         var(--sand-300);
  --border-strong:  var(--iron-800);
  --accent:         var(--oxide-600);
  --accent-hover:   var(--oxide-500);
  --accent-press:   var(--oxide-700);
  --accent-text:    var(--sand-100);
  --focus-ring:     var(--oxide-600);

  /* type */
  --font-display: "Archivo", "Arial Black", sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Menlo", monospace;

  --step--1: clamp(0.8rem,  0.78rem + 0.10vw, 0.86rem);
  --step-0:  clamp(1rem,    0.97rem + 0.18vw, 1.115rem);
  --step-1:  clamp(1.15rem, 1.09rem + 0.30vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.32rem + 0.62vw, 1.85rem);
  --step-3:  clamp(1.9rem,  1.62rem + 1.35vw, 2.75rem);
  --step-4:  clamp(2.4rem,  1.95rem + 2.30vw, 3.9rem);
  --step-display: clamp(2.4rem, 1.4rem + 5.4vw, 6.4rem);

  /* space */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-s:   0.875rem;
  --space-m:   clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  --space-l:   clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  --space-xl:  clamp(2.75rem, 2.2rem + 2.2vw, 4.25rem);
  --band-pad:  clamp(4.75rem, 3.4rem + 6.4vw, 9rem);
  --gutter:    clamp(1.25rem, 4vw, 3.5rem);
  --content-max: 76rem;

  /* motion — machine tool: settles fast, never overshoots */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 550ms;

  --nav-h: 4.25rem;
}

/* dark-material context (iron + oxide bands remap the semantic layer) */
.on-iron {
  --surface:        var(--iron-800);
  --surface-sunken: var(--iron-900);
  --text:           var(--sand-100);
  --text-muted:     var(--iron-300);
  --border:         var(--iron-600);
  --border-strong:  var(--sand-100);
  --accent:         var(--oxide-400);
  --accent-text:    var(--iron-900);
}
.on-oxide {
  --surface:        var(--oxide-600);
  --surface-sunken: var(--oxide-700);
  --text:           var(--sand-100);
  --text-muted:     oklch(0.855 0.045 55);
  --border:         oklch(0.520 0.120 35);
  --border-strong:  var(--sand-100);
  --accent:         var(--sand-100);
  --accent-text:    var(--oxide-700);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.08; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
:target { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }

::selection { background: var(--oxide-600); color: var(--sand-100); }

.skip {
  position: fixed;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 100;
  translate: 0 -300%;
  background: var(--iron-900);
  color: var(--sand-100);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.7rem 1rem;
  transition: translate var(--dur-1) var(--ease);
}
.skip:focus-visible { translate: 0 0; outline-color: var(--oxide-500); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-iron :focus-visible, .on-oxide :focus-visible { outline-color: var(--sand-100); }

@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;
  }
}

/* ---------- primitives ---------- */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--content-max));
  margin-inline: auto;
}
.band { padding-block: var(--band-pad); position: relative; }

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 118%;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.94;
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
}

/* overline: mono tag + stitch-weld dashes (the seam motif) */
.overline {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: var(--space-m);
}
.overline::before {
  content: "";
  width: 3.4rem;
  height: 3px;
  flex: none;
  background: repeating-linear-gradient(90deg,
    currentColor 0 12px, transparent 12px 19px);
}

.section-head { margin-block-end: var(--space-xl); }
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 118%;
  text-transform: uppercase;
  font-size: var(--step-4);
  letter-spacing: 0.004em;
  max-width: 21ch;
}
.section-head .lede { margin-block-start: var(--space-m); color: var(--text-muted); max-width: 52ch; }

/* buttons — machined: instant, no float, presses 1px like a switch */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 110%;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}
.btn:active { translate: 0 1px; }
.btn-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.on-oxide .btn-primary:hover { background: oklch(0.99 0.01 84); border-color: oklch(0.99 0.01 84); }
.btn-ghost { border-color: var(--border-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { background: var(--text); color: var(--surface); }
.btn .arrow { transition: translate var(--dur-1) var(--ease); }
.btn:hover .arrow { translate: 4px 0; }

.click-trigger {
  margin-block-start: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* reveal-on-scroll (guarded: visible without JS / with reduced motion) */
html.js [data-reveal] {
  opacity: 0;
  translate: 0 16px;
  transition: opacity var(--dur-3) var(--ease), translate var(--dur-3) var(--ease);
  transition-delay: calc(var(--ri, 0) * 70ms);
}
html.js [data-reveal].is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; translate: 0 0; }
}

/* ============================================================
   NAV
   ============================================================ */
.site-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  background: var(--sand-100);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease);
}
.site-nav.scrolled { border-bottom-color: var(--sand-300); }
.site-nav .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--iron-800);
}
.brand svg { height: 2.35rem; width: auto; }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name b {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 118%;
  font-size: 1.18rem;
  letter-spacing: 0.01em;
}
.brand-name span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  color: var(--oxide-600);
  margin-top: 0.28rem;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2rem);
  list-style: none;
  padding: 0;
}
.nav-links a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--iron-800);
  padding-block: 0.4rem;
  background-image: repeating-linear-gradient(90deg,
    var(--oxide-600) 0 9px, transparent 9px 15px);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--dur-2) var(--ease);
}
.nav-links a:hover { background-size: 100% 2px; }
.nav-phone {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--iron-800);
  white-space: nowrap;
}
.nav-phone:hover { color: var(--oxide-600); }
.nav-cta { padding: 0.62rem 1.1rem; font-size: 0.8rem; }
.nav-actions { display: flex; align-items: center; gap: 1.4rem; }

.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  padding: 10px;
  background: transparent;
  border: 2px solid var(--iron-800);
}
.menu-btn .bar {
  height: 2.5px;
  background: var(--iron-800);
  transition: rotate var(--dur-2) var(--ease), translate var(--dur-2) var(--ease), opacity var(--dur-1);
}
.menu-btn[aria-expanded="true"] .bar:nth-child(1) { rotate: 45deg; translate: 0 8.5px; }
.menu-btn[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .bar:nth-child(3) { rotate: -45deg; translate: 0 -8.5px; }

/* full-screen mobile menu — an iron brand moment */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--iron-900);
  color: var(--sand-100);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--nav-h) + 4vh) var(--gutter) max(2.25rem, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.mobile-menu ul { list-style: none; padding: 0; display: grid; gap: 0.4rem; align-content: center; }
.mobile-menu a.mm-link {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 118%;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 9vw, 3.2rem);
  line-height: 1.12;
  text-decoration: none;
  color: var(--sand-100);
  display: inline-block;
  translate: 0 14px;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease), translate var(--dur-3) var(--ease), color var(--dur-1);
  transition-delay: calc(var(--mi) * 55ms);
}
.mobile-menu.open a.mm-link { opacity: 1; translate: 0 0; }
.mobile-menu a.mm-link:hover { color: var(--oxide-400); }
.mm-foot {
  border-top: 1px solid var(--iron-600);
  padding-top: 1.4rem;
  display: grid;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--iron-300);
}
.mm-foot a { color: var(--sand-100); text-decoration: none; }
.mm-foot a:hover { color: var(--oxide-400); }

/* mobile sticky call bar */
.callbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: none;
  grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--iron-900);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--iron-900);
}
.callbar a {
  padding: 1rem 0.5rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.callbar .cb-call { background: var(--oxide-600); color: var(--sand-100); }
.callbar .cb-quote { background: var(--iron-900); color: var(--sand-100); }

/* ============================================================
   HERO — the annotated field drawing
   ============================================================ */
.hero {
  padding-block-start: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5.5rem));
  padding-block-end: 0;
  overflow: clip;
}
.hero-head { margin-block-end: clamp(2rem, 4.5vw, 3.75rem); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 11fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-end: var(--space-l);
}
.hero-eyebrow .tick { width: 9px; height: 9px; background: var(--oxide-600); flex: none; }
.hero h1 { font-size: var(--step-display); }
.hero h1 > span { display: block; }
.hero h1 .ox { color: var(--oxide-600); }
.hero-sub {
  max-width: 42ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
}
.hero-ctas {
  margin-block-start: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.25rem;
}
.hero-fig { position: relative; }
.hero-fig svg { width: 100%; height: auto; }

/* engineering strokes */
.fig-grid line { stroke: var(--sand-300); stroke-width: 1; }
.fig-stroke {
  fill: none;
  stroke: var(--iron-800);
  stroke-width: 2.25;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.fig-stroke.thin { stroke-width: 1.4; }
.fig-fill { fill: var(--iron-800); }
.fig-ground { stroke: var(--sand-400); stroke-width: 1.6; stroke-dasharray: 10 7; }
.fig-callout circle.ring { fill: none; stroke: var(--oxide-600); stroke-width: 2; }
.fig-callout .cross { stroke: var(--oxide-600); stroke-width: 2; }
.fig-callout .leader { fill: none; stroke: var(--oxide-600); stroke-width: 1.5; stroke-dasharray: 5 5; }
.fig-note {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  fill: var(--iron-800);
}
.fig-note.soft { fill: var(--sand-400); font-size: 12px; }
.fig-note.ox { fill: var(--oxide-600); }

/* draw-on animation (adds .drawn via JS; every path has pathLength=1) */
html.js .hero-fig .drawable {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
html.js .hero-fig.drawn .drawable {
  animation: draw-line 0.7s var(--ease) forwards;
  animation-delay: var(--dd, 0s);
}
html.js .hero-fig .late { opacity: 0; }
html.js .hero-fig.drawn .late {
  animation: fade-in 0.5s var(--ease) forwards;
  animation-delay: var(--dd, 1s);
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.js .hero-fig .drawable { stroke-dasharray: none; stroke-dashoffset: 0; }
  html.js .hero-fig .late { opacity: 1; }
}

/* the dimension strip — hero stats drawn as a measured line */
.dim-strip {
  margin-block-start: clamp(3rem, 6vw, 5rem);
  border-top: 2px solid var(--iron-800);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.dim-cell {
  position: relative;
  padding: 1.4rem 1.5rem 0 0;
}
.dim-cell::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 2px;
  height: 14px;
  background: var(--iron-800);
}
.dim-cell .dim-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-block-end: 0.45rem;
}
.dim-cell .dim-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 114%;
  font-size: var(--step-2);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.01em;
}
.dim-cell .dim-value em { font-style: normal; color: var(--oxide-600); }
.hero .dim-strip { padding-block-end: var(--band-pad); }

/* ============================================================
   SERVICES — iron scene
   ============================================================ */
.services-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-l);
  align-items: end;
  margin-block-end: var(--space-xl);
}
.services-head .section-head { margin: 0; }
.weld-symbol { justify-self: end; align-self: start; }
.weld-symbol svg { width: clamp(120px, 16vw, 190px); height: auto; }
.weld-symbol .ws-stroke { fill: none; stroke: var(--iron-450); stroke-width: 2; }
.weld-symbol .ws-accent { fill: none; stroke: var(--oxide-400); stroke-width: 2; }
.weld-symbol .ws-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; fill: var(--iron-450); }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--iron-600);
  border: 1px solid var(--iron-600);
}
.svc {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
  background: var(--iron-800);
  padding: 2rem 1.75rem 1.9rem;
  position: relative;
  transition: background-color var(--dur-2) var(--ease);
}
.svc::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--oxide-400);
  transition: width var(--dur-2) var(--ease);
}
.svc:hover { background: var(--iron-700); }
.svc:hover::before { width: 100%; }
.svc-icon { margin-block-end: 1.5rem; }
.svc-icon svg {
  width: 46px; height: 46px;
  fill: none;
  stroke: var(--sand-100);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: stroke var(--dur-2) var(--ease);
}
.svc:hover .svc-icon svg { stroke: var(--oxide-400); }
.svc h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 114%;
  text-transform: uppercase;
  font-size: var(--step-1);
  letter-spacing: 0.015em;
  margin-block-end: 0.8rem;
}
.svc p { color: var(--text-muted); font-size: 0.96rem; margin-block-end: 1.4rem; }
.svc-jobs {
  list-style: none;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--iron-600);
  display: grid;
  gap: 0.45rem;
  align-self: end;
}
.svc-jobs li {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--iron-300);
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}
.svc-jobs li::before { content: ""; width: 7px; height: 7px; background: var(--oxide-400); flex: none; translate: 0 -1px; }

/* ============================================================
   THE STANDARD — paper scene, traveler card
   ============================================================ */
.standard-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.standard-copy .section-head { margin-block-end: var(--space-l); }
.evidence { list-style: none; padding: 0; display: grid; }
.evidence li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  padding-block: 1.3rem;
  border-top: 1px solid var(--sand-300);
}
.evidence li:last-child { border-bottom: 1px solid var(--sand-300); }
.evidence .ev-key {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--oxide-600);
  padding-top: 0.25rem;
  min-width: 5.4rem;
}
.evidence h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  font-size: var(--step-1);
  margin-block-end: 0.35rem;
}
.evidence p { color: var(--text-muted); font-size: 0.97rem; max-width: 46ch; }

/* the traveler — a QC checklist artifact that ships with every job */
.traveler {
  border: 2px solid var(--iron-800);
  background: var(--sand-100);
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}
.traveler-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border-bottom: 2px solid var(--iron-800);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.traveler-head .doc-no { color: var(--text-muted); font-weight: 500; }
.traveler ul { list-style: none; padding: 0.6rem 0; }
.traveler li {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.05rem 1.4rem;
}
.traveler .box { margin-top: 0.2rem; }
.traveler li + li { border-top: 1px dashed var(--sand-300); }
.traveler .box {
  width: 22px; height: 22px;
  border: 2px solid var(--iron-800);
  flex: none;
  display: grid;
  place-items: center;
}
.traveler .box svg { width: 15px; height: 15px; stroke: var(--oxide-600); stroke-width: 3; fill: none; }
.traveler .t-item { flex: 1; }
.traveler .t-item b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}
.traveler .t-item span { font-size: 0.85rem; color: var(--text-muted); }
.traveler-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.4rem;
  border-top: 2px solid var(--iron-800);
  background: var(--sand-200);
}
.traveler-foot .rule {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.stamp {
  width: 74px; height: 74px;
  flex: none;
  rotate: -8deg;
}
.stamp circle { fill: none; stroke: var(--oxide-600); stroke-width: 2.5; }
.stamp text {
  font-family: var(--font-mono);
  font-weight: 600;
  fill: var(--oxide-600);
  letter-spacing: 0.14em;
}

/* ============================================================
   CAPABILITY INDEX — iron scene, shop traveler table
   ============================================================ */
.cap-band .section-head { margin-block-end: var(--space-l); }
.proc-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-end: var(--space-l); }
.proc-chips span {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--iron-600);
  color: var(--iron-300);
}
.proc-chips span b { color: var(--sand-100); font-weight: 600; }
.cap-table { width: 100%; border-collapse: collapse; border: 1px solid var(--iron-600); }
.cap-table caption { text-align: left; margin-block-end: 0.8rem; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.12em; color: var(--iron-300); text-transform: uppercase; }
.cap-table th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--iron-300);
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--iron-600);
  background: var(--iron-900);
}
.cap-table td {
  padding: 0.92rem 1.25rem;
  border-bottom: 1px solid var(--iron-700);
  vertical-align: baseline;
}
.cap-table tbody tr { position: relative; transition: background-color var(--dur-1) var(--ease); }
.cap-table tbody tr:hover { background: var(--iron-700); }
.cap-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--oxide-400); }
.cap-table .ref {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--oxide-400);
  white-space: nowrap;
}
.cap-table .op { font-weight: 600; font-size: 0.98rem; }
.cap-table .cat {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--iron-300);
  white-space: nowrap;
}
.cap-note {
  margin-block-start: var(--space-m);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--iron-300);
}
.cap-note a { color: var(--sand-100); text-underline-offset: 3px; }
.cap-note a:hover { color: var(--oxide-400); }

/* ============================================================
   COVERAGE — the oxide scene
   ============================================================ */
.coverage-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.coverage h2 { font-size: var(--step-4); }
.coverage .lede { color: var(--text-muted); }
.coverage-points { list-style: none; padding: 0; margin-block: var(--space-l); display: grid; gap: 0.9rem; }
.coverage-points li { display: flex; gap: 0.9rem; align-items: baseline; font-size: 1.02rem; }
.coverage-points li::before { content: ""; width: 8px; height: 8px; background: var(--sand-100); flex: none; }
.coverage-points b { font-weight: 700; }
.map-fig { position: relative; }
.map-fig svg { width: 100%; height: auto; }
.map-road { fill: none; stroke: oklch(0.62 0.11 36); stroke-width: 2.5; }
.map-ring { fill: none; stroke: oklch(0.70 0.10 40); stroke-width: 1.4; stroke-dasharray: 6 7; }
.map-town { fill: var(--sand-100); }
.map-town-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  fill: var(--sand-100);
}
.map-soft { fill: oklch(0.78 0.075 45); }
.map-hub { fill: var(--sand-100); }
.map-hub-pulse { fill: none; stroke: var(--sand-100); stroke-width: 1.5; opacity: 0.7; transform-origin: center; transform-box: fill-box; }
html.js .map-hub-pulse { animation: hub-pulse 3.2s var(--ease) infinite; }
@keyframes hub-pulse {
  0%   { scale: 0.45; opacity: 0.85; }
  70%  { scale: 1.6;  opacity: 0; }
  100% { scale: 1.6;  opacity: 0; }
}

/* ============================================================
   PROCESS — paper scene, four real steps
   ============================================================ */
.steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.steps li { counter-increment: step; position: relative; padding-top: 1.4rem; }
.steps li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--iron-800);
}
.steps li::after {
  content: "";
  position: absolute;
  top: -5px; left: 0;
  width: 12px; height: 12px;
  background: var(--oxide-600);
}
.steps .step-no {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--oxide-600);
  display: block;
  margin-block-end: 0.7rem;
}
.steps .step-no::before { content: "STEP 0" counter(step); }
.steps h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 114%;
  text-transform: uppercase;
  font-size: var(--step-1);
  margin-block-end: 0.6rem;
}
.steps p { color: var(--text-muted); font-size: 0.95rem; }

/* ============================================================
   ABOUT — sunken paper, editorial
   ============================================================ */
.about-band { background: var(--sand-200); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2.5rem, 6vw, 6rem);
}
.about-copy h2 { font-size: var(--step-3); max-width: 22ch; }
.about-copy p { margin-block-start: var(--space-m); max-width: 58ch; color: var(--text-muted); font-size: 1.04rem; }
.about-copy p b, .about-copy p strong { color: var(--text); }
.operator-card { border: 2px solid var(--iron-800); background: var(--sand-100); align-self: start; position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.operator-card .op-head { padding: 1.5rem 1.5rem 1.2rem; border-bottom: 2px solid var(--iron-800); }
.operator-card .op-head .mark { width: 54px; margin-block-end: 1.1rem; }
.operator-card .op-head b {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 116%;
  text-transform: uppercase;
  font-size: 1.35rem;
  line-height: 1.05;
}
.operator-card .op-head span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oxide-600);
}
.op-facts { list-style: none; margin: 0; padding: 0.4rem 0; }
.op-facts div {
  display: grid;
  grid-template-columns: 7.2rem 1fr;
  gap: 1rem;
  padding: 0.8rem 1.5rem;
}
.op-facts div + div { border-top: 1px dashed var(--sand-300); }
.op-facts dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 0.2rem;
}
.op-facts dd { margin: 0; font-weight: 600; font-size: 0.95rem; }

/* the palate-cleanser line */
.creed {
  padding-block: clamp(4rem, 9vw, 8rem) var(--band-pad);
  background: var(--sand-200);
}
.creed .creed-line {
  font-size: clamp(2.2rem, 6.4vw, 5.4rem);
  max-width: 16ch;
}
.creed .creed-line .ox { color: var(--oxide-600); }
.creed .creed-src {
  margin-block-start: var(--space-m);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   CONTACT — iron scene, job ticket
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.contact-rails { display: grid; gap: 0; }
.rail {
  padding-block: 1.5rem;
  border-top: 1px solid var(--iron-600);
}
.rail:first-of-type { border-top: 0; padding-top: 0; }
.rail .rail-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oxide-400);
  display: block;
  margin-block-end: 0.5rem;
}
.rail a { text-decoration: none; }
.rail .rail-big {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: 0.01em;
  color: var(--sand-100);
  text-transform: uppercase;
}
a.rail-link:hover .rail-big, a.rail-link:hover { color: var(--oxide-400); }
.rail .rail-sub { color: var(--iron-300); font-size: 0.92rem; margin-block-start: 0.3rem; }
.rail .rail-mid { font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.03em; color: var(--sand-100); word-break: break-all; }

/* job ticket form */
.ticket {
  background: var(--sand-100);
  color: var(--iron-800);
  border: 2px solid var(--iron-900);
}
.ticket-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.6rem;
  border-bottom: 2px solid var(--iron-800);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.ticket-head .tno { color: var(--oxide-600); }
.ticket form { padding: 1.6rem; display: grid; gap: 1.2rem; }
.field { display: grid; gap: 0.45rem; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: oklch(0.40 0.02 60);
}
.field label .req { color: var(--oxide-600); }
.field input, .field select, .field textarea {
  border: 1.5px solid oklch(0.62 0.035 75);
  background: var(--sand-100);
  padding: 0.8rem 0.9rem;
  font-size: 1rem;
  border-radius: 0;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 7.5rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--oxide-600);
  box-shadow: 0 0 0 1.5px var(--oxide-600);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.ticket .btn { width: 100%; }
.form-note {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: oklch(0.40 0.02 60);
  text-align: center;
}
.form-note a { color: var(--oxide-600); }
.field .hint { font-size: 0.8rem; color: oklch(0.45 0.02 60); font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* quote form — stamped "received" confirmation (replaces the form on submit) */
.ticket-done {
  padding: 2.6rem 1.8rem 3rem;
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  text-align: center;
}
.ticket-done .stamp {
  width: 92px; height: 92px;
  rotate: -8deg;
  margin-bottom: 0.5rem;
}
.td-kicker {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxide-600);
}
.td-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--iron-900);
  line-height: 1.05;
}
.td-body {
  max-width: 42ch;
  color: oklch(0.40 0.02 60);
  line-height: 1.55;
}
.td-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: oklch(0.40 0.02 60);
}
.td-note a { color: var(--oxide-600); }

/* ============================================================
   FOOTER — the title block
   ============================================================ */
.site-foot { background: var(--iron-900); padding-block: 0; }
.titleblock {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--iron-600);
  border-inline: 0;
}
.tb-cell {
  padding: 1.1rem 1.3rem 1.2rem;
  border-right: 1px solid var(--iron-600);
  min-width: 0;
}
.tb-cell:last-child { border-right: 0; }
.tb-cell .tb-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--iron-450);
  margin-block-end: 0.4rem;
}
.tb-cell .tb-v {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--sand-100);
  overflow-wrap: anywhere;
}
.tb-cell .tb-v a { color: inherit; text-decoration: none; }
.tb-cell .tb-v a:hover { color: var(--oxide-400); }
.foot-main {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 3fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: var(--space-xl);
}
.foot-brand p { color: var(--iron-300); font-size: 0.95rem; max-width: 34ch; margin-block-start: 1.2rem; }
.foot-brand .brand-name span { color: var(--oxide-400); }
.foot-col h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--iron-450);
  margin-block-end: 1.1rem;
}
.foot-col ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.foot-col a { text-decoration: none; color: var(--sand-100); font-size: 0.95rem; font-weight: 500; }
.foot-col a:hover { color: var(--oxide-400); }
.foot-word {
  border-top: 1px solid var(--iron-600);
  padding-block: var(--space-l) 0;
  overflow: clip;
}
.foot-word .display {
  font-size: clamp(3rem, 11.5vw, 10rem);
  color: var(--iron-800);
  -webkit-text-stroke: 1px var(--iron-600);
  line-height: 0.9;
  translate: 0 0.12em;
  white-space: nowrap;
  text-align: center;
  user-select: none;
}
.foot-legal {
  border-top: 1px solid var(--iron-600);
  padding-block: 1.3rem calc(1.3rem + 0.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--iron-450);
}
.foot-legal .cred { color: var(--iron-450); }

/* ============================================================
   INTERIOR PAGES — breadcrumbs, page heroes, prose, CTA bands
   ============================================================ */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-end: var(--space-l);
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--oxide-600); }
.crumbs .sep { color: var(--oxide-600); }
.crumbs [aria-current] { color: var(--text); }

.page-hero { padding-block-start: calc(var(--nav-h) + clamp(2.2rem, 5vw, 4.5rem)); }
.page-hero h1 { font-size: clamp(2.3rem, 1.3rem + 4.6vw, 5rem); }
.page-hero h1 .ox { color: var(--oxide-600); }
.page-hero .hero-sub { margin-block-start: var(--space-l); }

/* interior body copy */
.prose p { color: var(--text-muted); max-width: 58ch; font-size: 1.02rem; }
.prose p + p { margin-block-start: var(--space-m); }
.prose strong { color: var(--text); }
.prose a {
  color: var(--text);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--accent); }

/* CTA band (oxide scene) */
.cta-line { font-size: clamp(2rem, 1.2rem + 3.8vw, 4.2rem); max-width: 20ch; }
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.25rem;
  margin-block-start: var(--space-l);
}

/* services hub — whole card is the link */
.svc h3 a { color: inherit; text-decoration: none; }
.svc h3 a::after { content: ""; position: absolute; inset: 0; }

/* current page marked in the nav (stitch stays on) */
.nav-links a[aria-current] { background-size: 100% 2px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1120px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .titleblock { grid-template-columns: repeat(3, 1fr); }
  .tb-cell { border-bottom: 1px solid var(--iron-600); }
  .tb-cell:nth-child(3n) { border-right: 0; }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-fig { order: 2; max-width: 46rem; }
  .dim-strip { grid-template-columns: repeat(2, 1fr); row-gap: 1.6rem; }
  .standard-grid, .coverage-grid, .contact-grid, .about-grid { grid-template-columns: 1fr; }
  .traveler, .operator-card { position: static; max-width: 34rem; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .services-head { grid-template-columns: 1fr; }
  .weld-symbol { justify-self: start; order: 2; }
  .map-fig { max-width: 34rem; }
  .foot-main { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-links, .nav-phone { display: none; }
  .menu-btn { display: flex; }
  .nav-cta { display: none; }
  .callbar { display: grid; }
  body { padding-bottom: calc(3.4rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; }
  /* annotations are drafted for desktop scale — keep just the machine on phones */
  .hero-fig .fig-note, .hero-fig .fig-callout { display: none; }
  .svc { grid-template-rows: auto; grid-row: auto; }
  .steps { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .cap-table .cat { display: none; }
  .cap-table th:nth-child(3) { display: none; }
  .dim-cell .dim-value { font-size: 1.3rem; }
  .titleblock { grid-template-columns: repeat(2, 1fr); }
  .tb-cell:nth-child(3n) { border-right: 1px solid var(--iron-600); }
  .tb-cell:nth-child(2n) { border-right: 0; }
  .foot-main { grid-template-columns: 1fr; }
}

/* no-JS: everything simply visible */
html.no-js .mobile-menu { display: none; }