@font-face {
  font-family: "IBM Plex Sans Condensed";
  src: url("/assets/fonts/385a082a1eac88343eab01fb6746be04b7175dacaf4550b17dee76ea0f78126d.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ba711a3085ff9f27440b6b9c4550cfc47c97bf36591d5da958b975bb3add8c1a.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/f78048030eab62e860efa39a0df79e2e5581bf122eb95b9bc42c0b8a4988d205.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/6a825b4824c01cbb401e829e5a066a1818411bcb3538b5a5792c5ca9b82343c3.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

/* ── Cut Sheet to Quote — the design-system shop theme, ported faithfully ───
   Visual language: docs/reference/client-sites-design-system-v20,
   [data-vertical="shop"]. Graphite structure, oxide machine-panel actions,
   blueprint offset plates, square corners everywhere. The nine palette names
   below are contract-pinned by the QA probe. */

:root {
  --graphite: #121820;
  --oxide: #F26A21;
  --blueprint: #123A5A;
  --galvanized: #D8DEE4;
  --shop-paper: #F4F6F7;
  --inspection: #246347;
  --white: #ffffff;
  --muted: #56626D;
  --line: #A9B4BD;
  --oxide-press: #D65212;
  --oxide-ink: #963705;
  --oxide-link: #A53B00;

  --paper: var(--shop-paper);
  --surface: var(--white);
  --surface-sunken: var(--galvanized);
  --surface-inverse: var(--graphite);
  --surface-brand: var(--blueprint);
  --text-strong: var(--graphite);
  --text-body: var(--graphite);
  --text-muted: var(--muted);
  --text-inverse: var(--white);
  --text-brand: var(--blueprint);
  --text-accent: var(--oxide-ink);
  --text-eyebrow: var(--oxide-ink);
  --line-strong: var(--graphite);
  --action-bg: var(--oxide);
  --action-ink: var(--graphite);
  --action-border: var(--graphite);
  --action-bg-hover: var(--oxide-press);
  --urgent-bg: var(--oxide);
  --accent: var(--oxide);
  --verify: var(--inspection);
  --focus-ring: var(--oxide);
  --link: var(--blueprint);
  --link-hover: var(--oxide-link);
  --panel-bg: var(--galvanized);
  --panel-bar: var(--oxide);

  --display: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --utility: "IBM Plex Mono", "Cascadia Mono", monospace;

  --fs-display: clamp(2.9rem, 5vw, 4.2rem);
  --fs-h2: clamp(2.2rem, 4vw, 3.5rem);
  --fs-h3: 1.55rem;
  --fs-lede: clamp(1.05rem, 2vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.96rem;
  --fs-caption: 0.82rem;
  --fs-mono: 0.8rem;
  --lh-display: 0.95;
  --lh-body: 1.56;
  --tracking-mono: 0.11em;
  --measure-lede: 36rem;

  /* One inset for the whole page: the content column and the full-bleed
     chrome both derive from it, so they cannot drift apart. */
  --gutter: 1rem;
  --container: 78rem;

  /* Full-bleed chrome centres on the same basis as the content column.
     100vw would include the scrollbar and land the logo half a scrollbar
     off the rail beneath it. */
  --bleed-gutter: max(var(--gutter), calc((100% - var(--container)) / 2));
  --section-y: clamp(2.6rem, 4.4vw, 4.2rem);
  --panel-pad: clamp(2rem, 5vw, 4rem);
  --hero-pad: clamp(1.8rem, 3.2vw, 2.8rem);
  --form-pad: clamp(1.2rem, 4vw, 2.5rem);
  --bar-sm: 0.35rem;
  --bar: 0.45rem;
  --bar-md: 0.5rem;
  --bar-lg: 0.6rem;
  --tap-min: 44px;
  --shadow-offset: 1rem 1rem 0 var(--blueprint);
  --shadow-offset-sm: 0.55rem 0.55rem 0 var(--surface-sunken);
}

/* ── Element floor ───────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-body);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
}

img,
figure {
  display: block;
  margin: 0;
}

h1,
h2,
h3 {
  max-width: 24ch;
  margin: 0;
  color: var(--text-strong);
  font-family: var(--display);
  font-weight: 600;
  line-height: var(--lh-display);
  text-wrap: balance;
}

h1 {
  max-width: 12ch;
  font-size: var(--fs-display);
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

p {
  max-width: 68ch;
  margin: 0 0 1rem;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
}

p,
li,
blockquote,
figcaption,
address {
  overflow-wrap: anywhere;
}

a {
  color: var(--link);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--link-hover);
}

a,
summary {
  touch-action: manipulation;
  min-height: 44px;
}

a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--oxide);
  outline-offset: 3px;
}

/* ── Skip link ───────────────────────────────────────────────────────────── */

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  padding: 0.75rem 1rem;
  border: 3px solid var(--graphite);
  background: var(--oxide);
  color: var(--graphite);
  font-weight: 600;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link:focus-visible,
.skip-link:focus {
  clip-path: none;
  overflow: visible;
}

/* ── Utility band (DemoBand disclosure strip) ────────────────────────────── */

.shop-demo-band {
  display: flex;
  justify-content: flex-end;
  padding: 0.45rem var(--bleed-gutter);
  background: var(--surface-brand);
  color: var(--text-inverse);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shop-demo-band span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
}

/* ── Process cards (home quote sequence) ─────────────────────────────────── */

.process-cards h2 {
  margin-bottom: 0.7rem;
}

.process-cards > p {
  color: var(--text-muted);
  max-width: var(--measure-lede);
}

.process-cards ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.process-cards ol li {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: var(--bar-md) solid var(--line-strong);
}

.process-cards ol li span {
  display: block;
  margin-bottom: 1rem;
  color: var(--text-accent);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
}

.process-cards ol li strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--text-strong);
}

.process-cards ol li p {
  margin: 0.55rem 0 0;
  color: var(--text-muted);
}

/* ── Header (SiteHeader onDark, plate brand mark) ────────────────────────── */

.shop-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "brand primary action languages";
  align-items: center;
  gap: 1.5rem;
  padding: 0.7rem var(--bleed-gutter);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-strong);
}

.shop-brand-group {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.shop-brand-mark {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  flex: 0 0 auto;
  border: 2px solid var(--line-strong);
  border-left: 0.35rem solid var(--oxide);
  background: var(--blueprint);
  color: var(--white);
  font-family: var(--utility);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
}

.shop-brand {
  display: inline-flex;
  align-items: center;
  color: var(--text-strong);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.desktop-shop-nav {
  grid-area: primary;
  justify-self: center;
}

.desktop-shop-nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.desktop-shop-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.2rem;
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
}

.desktop-shop-nav a:hover {
  color: var(--link-hover);
}

.header-action {
  grid-area: action;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 2px solid var(--action-border);
  background: var(--action-bg);
  color: var(--action-ink);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
}

.header-action:hover {
  background: var(--action-bg-hover);
  color: var(--action-ink);
}

.desktop-shop-languages {
  grid-area: languages;
}

.desktop-shop-languages a,
.mobile-shop-languages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.2rem;
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
}

.mobile-shop-menu {
  display: none;
}

/* ── Breadcrumbs (mono trail, arrow separators) ──────────────────────────── */

.breadcrumb-nav {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1rem;
  color: var(--text-muted);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.breadcrumb-nav ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.2rem 0;
  list-style: none;
}

.breadcrumb-nav li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
}

.breadcrumb-nav li + li::before {
  content: "→";
  color: var(--oxide);
}

.breadcrumb-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--link);
  text-decoration: none;
}

.breadcrumb-nav a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* ── Page frame ──────────────────────────────────────────────────────────── */

.shop-page {
  display: block;
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin: 0 auto var(--section-y);
}

.shop-page > section,
.shop-page > nav,
.shop-page > aside,
.shop-page > figure {
  margin-top: var(--section-y);
}

.shop-page > .cut-sheet-hero {
  margin-top: 1rem;
}

/* ── Hero (board tone with the estimator aside) ──────────────────────────── */

.cut-sheet-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: center;
  min-height: 17rem;
  padding: var(--hero-pad);
  background: var(--surface);
  border-top: var(--bar-lg) solid var(--line-strong);
  box-shadow: var(--shadow-offset);
  overflow: hidden;
}

/* The rotated ornament read as stray diagonal artifacts on a light hero;
   removed (owner-confirmed by visual QA). */
.cut-sheet-hero::before {
  content: "";
  display: none;
}

/* One centred column, so every child shares a single left edge. Centring
   each child on its own max-width staggered them across four edges. */
.cut-sheet-hero--solo {
  grid-template-columns: minmax(0, 60rem);
  justify-content: start;
  min-height: 14rem;
}

.cut-sheet-hero--solo > h1 {
  max-width: 20ch;
}

.cut-sheet-hero > h1,
.cut-sheet-hero > .answer-first,
.cut-sheet-hero > .drawing-mark {
  grid-column: 1;
  position: relative;
  z-index: 1;
}

.drawing-mark {
  display: block;
  margin: 0 0 0.7rem;
  color: var(--text-eyebrow);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.answer-first {
  max-width: var(--measure-lede);
  margin: 0.9rem 0 0;
  font-size: var(--fs-lede);
}

.cut-sheet-hero .hero-actions {
  grid-column: 1;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.hero-conversion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.72rem 1.4rem;
  border: 2px solid var(--action-border);
  background: var(--action-bg);
  color: var(--action-ink);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
}

.hero-conversion:hover {
  background: var(--action-bg-hover);
  color: var(--action-ink);
}

/* ── Job traveler + estimator readiness (hero-adjacent tickets) ──────────── */

.job-traveler,
.estimator-readiness {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: relative;
  z-index: 1;
  align-self: center;
  margin: 0;
  padding: 1.5rem;
  list-style: none;
  counter-reset: traveler;
  background: var(--surface);
  color: var(--text-body);
  border: 1px solid var(--line);
  border-top: var(--bar-lg) solid var(--oxide);
  box-shadow: var(--shadow-offset-sm);
}

.job-traveler::before,
.estimator-readiness::before {
  content: "JOB TRAVELER";
  display: block;
  margin-bottom: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-accent);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
}

html[lang="es"] .job-traveler::before {
  content: "RUTA DE TRABAJO";
}

/* The readiness ticket carries its own visible heading; no synthetic label. */
.estimator-readiness::before {
  content: none;
}

.estimator-readiness h2 {
  font-size: var(--fs-h3);
  margin-bottom: 0.7rem;
}

.estimator-readiness > p {
  margin: 0 0 0.7rem;
  color: var(--text-accent);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.job-traveler li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  counter-increment: traveler;
}

.job-traveler li + li {
  border-top: 1px solid var(--line);
}

.job-traveler li::before {
  content: counter(traveler, decimal-leading-zero);
  color: var(--text-accent);
  font-family: var(--utility);
  font-size: var(--fs-mono);
}

.estimator-readiness__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.55rem 0;
}

.estimator-readiness__item + .estimator-readiness__item {
  border-top: 1px solid var(--line);
}

.estimator-readiness__item dt {
  font-weight: 600;
}

.estimator-readiness__item dd {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--utility);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}

/* ── Subject and project tickets ─────────────────────────────────────────── */

.subject-ticket,
.project-ticket {
  max-width: 52rem;
  padding: var(--panel-pad);
  background: var(--surface);
  border-top: var(--bar-md) solid var(--blueprint);
  box-shadow: var(--shadow-offset-sm);
}

.subject-ticket p:first-of-type,
.project-ticket h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--text-strong);
}

/* ── Sections — heading rail left, measured copy right ───────────────────── */

.shop-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  column-gap: clamp(2rem, 5vw, 4rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.shop-section h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
}

.shop-section h2 {
  grid-column: 1;
  margin-bottom: 1rem;
}

.shop-section > p {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
}

.shop-section .ruled-index {
  grid-column: 1 / -1;
  grid-row: auto;
}

/* ── Capability scan section and its ruled hairline grid ─────────────────
   .capability-scan is the whole section (heading + note + ul.ruled-index);
   the scan grid spans the full container while ordinary sections stay at
   reading measure. */

.capability-scan {
  max-width: none;
}

.ruled-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.ruled-index li {
  position: relative;
  min-height: 10rem;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: var(--bar) solid var(--blueprint);
}

.ruled-index .route-code {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--text-accent);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ruled-index li:hover {
  background: var(--paper);
}

.ruled-index h3 {
  margin: 0;
}

.ruled-index a {
  color: var(--text-strong);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  text-decoration: none;
}

.ruled-index a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ruled-index p {
  margin: 0.55rem 0 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* ── Proof tickets ───────────────────────────────────────────────────────── */

.proof-tickets {
  max-width: 52rem;
  padding: var(--panel-pad);
  background: var(--surface);
  border-top: var(--bar-md) solid var(--verify);
  box-shadow: var(--shadow-offset-sm);
}

.proof-tickets ul {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.proof-tickets li strong {
  display: block;
  font-family: var(--utility);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--verify);
}

.proof-tickets blockquote {
  margin: 1rem 0 0;
  padding-left: 1rem;
  border-left: var(--bar-sm) solid var(--surface-sunken);
  color: var(--text-muted);
}

/* ── Media ───────────────────────────────────────────────────────────────── */

.shop-media,
.page-media {
  max-width: 52rem;
}

.shop-media figcaption,
.page-media figcaption {
  padding: 0.8rem 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.media-disclosure,
.media-credit {
  font-family: var(--utility);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Article review ──────────────────────────────────────────────────────── */

.article-review {
  max-width: 52rem;
  padding: var(--panel-pad);
  background: var(--surface);
  border-top: var(--bar-md) solid var(--blueprint);
  box-shadow: var(--shadow-offset-sm);
}

.article-review h2 {
  font-size: var(--fs-h3);
  margin-bottom: 1rem;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.shop-faq {
  max-width: 52rem;
}

.shop-faq h2 {
  margin-bottom: 1.4rem;
}

.shop-faq details {
  margin: 0.7rem 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

.shop-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.shop-faq summary::-webkit-details-marker {
  display: none;
}

.shop-faq summary::after {
  content: "+";
  color: var(--oxide-ink);
  font-family: var(--utility);
  font-weight: 600;
}

.shop-faq details[open] summary::after {
  content: "−";
}

.shop-faq details p {
  padding: 0 1rem 1rem;
  margin: 0;
  color: var(--text-muted);
}

/* ── Related pages ───────────────────────────────────────────────────────── */

.related-label {
  margin: 0 0 0.7rem;
  color: var(--text-muted);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.shop-related ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-related a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-brand);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.shop-related a:hover {
  background: var(--surface-sunken);
  color: var(--link-hover);
}

/* ── RFQ prompt (the machine-panel conversion band) ──────────────────────── */

.rfq-prompt {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-areas:
    "eyebrow action"
    "title action";
  column-gap: 2rem;
  align-items: center;
  padding: var(--panel-pad);
  background: var(--panel-bg);
  border-top: var(--bar-lg) solid var(--panel-bar);
}

.rfq-prompt::before {
  content: "NEXT: PREPARE QUOTE";
  grid-area: eyebrow;
  align-self: end;
  color: var(--text-accent);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
}

.rfq-prompt h2 {
  grid-area: title;
  align-self: start;
  max-width: 18ch;
}

.rfq-prompt .rfq-link {
  grid-area: action;
  justify-self: end;
}

html[lang="es"] .rfq-prompt::before {
  content: "SIGUIENTE: PREPARAR COTIZACIÓN";
}

.rfq-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.72rem 1.4rem;
  border: 2px solid var(--action-border);
  background: var(--action-bg);
  color: var(--action-ink);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}

.rfq-link:hover {
  background: var(--action-bg-hover);
  color: var(--action-ink);
}

/* ── Inactive request blueprint ──────────────────────────────────────────── */

.inactive-request-blueprint h2 {
  margin-bottom: 0.7rem;
}

.section-eyebrow {
  margin: 0 0 0.7rem;
  color: var(--text-eyebrow);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.inactive-request-blueprint {
  padding: var(--form-pad);
  background: var(--surface);
  border-top: var(--bar-lg) solid var(--oxide);
  box-shadow: var(--shadow-offset);
}

.inactive-request-blueprint__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.4rem 0 0;
}

.inactive-request-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.inactive-request-field dt {
  font-weight: 600;
  font-size: var(--fs-small);
}

.inactive-request-field dd {
  margin: 0;
  min-height: 3rem;
  display: flex;
  align-items: center;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: inset 0 2px 0 var(--paper);
  color: var(--text-muted);
  font-family: var(--utility);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.inactive-request-field dt {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.inactive-request-field__required {
  color: var(--text-accent);
  font-weight: 700;
}

.inactive-request-field__hint {
  font-family: var(--body);
  font-size: 0.9rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-muted);
  opacity: 0.85;
}

.inactive-request-blueprint__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 1.4rem 0 0;
  padding: 0.72rem 1.4rem;
  border: 2px solid var(--line);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-weight: 700;
  text-align: center;
  cursor: not-allowed;
}

.inactive-request-blueprint__note {
  margin: 0.55rem 0 0;
  color: var(--text-muted);
  font-family: var(--utility);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The demonstration-context section is required by the safety probe; it
   reads as a quiet note rather than a headline section. */
.shop-section--quality {
  display: block;
  max-width: 46rem;
}

.shop-section--quality h2 {
  font-size: 1.15rem;
  color: var(--text-muted);
}

.shop-section--quality p {
  font-size: var(--fs-small);
  color: var(--text-muted);
}


/* ── Footer ──────────────────────────────────────────────────────────────── */

.shop-footer {
  margin-top: var(--section-y);
  padding: 2.5rem var(--bleed-gutter);
  background: var(--surface);
  color: var(--text-body);
  border-top: var(--bar-lg) solid var(--oxide);
}

.footer-brand {
  display: block;
  color: var(--text-strong);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.footer-note {
  margin: 0.4rem 0 1rem;
  color: var(--text-muted);
  font-family: var(--utility);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shop-footer > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-strong);
  font-weight: 600;
}

.shop-footer address {
  font-style: normal;
  margin-top: 0.7rem;
}

.shop-footer section {
  margin-top: 1.4rem;
}

.shop-footer h2 {
  max-width: 24ch;
  color: var(--text-muted);
  font-family: var(--utility);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.shop-footer ul {
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.shop-footer a {
  color: var(--text-strong);
}

/* ── Not-found page (linkless by contract) ───────────────────────────────── */

.not-found main {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--form-pad);
}

.not-found-panel {
  max-width: 34rem;
  padding: var(--panel-pad);
  background: var(--surface);
  border-top: var(--bar-lg) solid var(--oxide);
  box-shadow: var(--shadow-offset-sm);
}

.not-found-panel h1 {
  margin-bottom: 1rem;
  line-height: 1.04;
}

.not-found-panel p {
  max-width: 46ch;
}

.not-found-code {
  margin: 0 0 0.7rem;
  color: var(--text-accent);
  font-family: var(--utility);
  font-weight: 600;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
}

.not-found-hint {
  color: var(--text-muted);
  font-size: var(--fs-small);
}


.footer-nav {
  margin-top: 1.4rem;
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}

.utility-tag {
  margin-right: 1.4rem;
  opacity: 0.9;
}

.not-found-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 1.4rem;
  padding: 0.72rem 1.4rem;
  font-weight: 700;
  text-decoration: none;
}

.shop-footer .footer-nav a {
  color: var(--text-strong);
}

.not-found-home {
  border: 2px solid var(--action-border);
  background: var(--action-bg);
  color: var(--action-ink);
}

/* ── Per-family accent coding ────────────────────────────────────────────── */

.page-family--home .cut-sheet-hero {
  border-top-color: var(--line-strong);
}

.page-family--capability-hub .cut-sheet-hero,
.page-family--capability .cut-sheet-hero {
  border-top-color: var(--blueprint);
}

.page-family--material-hub .cut-sheet-hero,
.page-family--material .cut-sheet-hero {
  border-top-color: var(--blueprint);
}

.page-family--industry-hub .cut-sheet-hero,
.page-family--industry .cut-sheet-hero,
.page-family--project-hub .cut-sheet-hero,
.page-family--project .cut-sheet-hero {
  border-top-color: var(--blueprint);
}

.page-family--quality .cut-sheet-hero,
.page-family--equipment .cut-sheet-hero {
  border-top-color: var(--verify);
}

.page-family--rfq .cut-sheet-hero,
.page-family--contact .cut-sheet-hero {
  border-top-color: var(--oxide);
}

.page-family--about .cut-sheet-hero,
.page-family--resource-hub .cut-sheet-hero,
.page-family--guide .cut-sheet-hero {
  border-top-color: var(--line-strong);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* 88rem for the same reason as the service theme: --hero-pad is sized in vw,
   which counts the scrollbar, while the slack it bleeds into is measured in
   client width. At 84rem this hero hung 2.5px past each edge. The margin is
   smaller here so the symptom was smaller, but the bug was identical. */
@media (min-width: 88rem) {
  /* Same rail alignment as the service theme: the hero plate bleeds by its
     own padding so its copy starts where the sections start. */
  .cut-sheet-hero {
    margin-inline: calc(-1 * var(--hero-pad));
  }


}

@media (max-width: 64rem) {
  .cut-sheet-hero {
    grid-template-columns: 1fr;
  }

  .job-traveler,
  .estimator-readiness {
    grid-column: 1;
    grid-row: auto;
    align-self: stretch;
    max-width: 30rem;
  }
}

@media (max-width: 48rem) {
  .shop-header {
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    grid-template-areas: none;
    row-gap: 0.7rem;
  }

  /* The hero carries its own action a few hundred pixels below. */
  .header-action {
    display: none;
  }

  .shop-brand-group {
    grid-column: 1;
    grid-row: 1;
    grid-area: auto;
  }

  .desktop-shop-nav {
    display: none;
  }

  .shop-header nav.desktop-shop-languages {
    display: none;
  }

  .mobile-shop-menu {
    display: block;
    grid-area: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .mobile-shop-menu summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 44px;
    padding: 0 0.2rem;
    font-family: var(--utility);
    font-weight: 600;
    font-size: var(--fs-mono);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-strong);
    cursor: pointer;
    list-style: none;
  }

  .mobile-shop-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-shop-menu summary::after {
    content: "+";
    margin-left: 0.55rem;
    color: var(--oxide);
  }

  .mobile-shop-menu[open] summary::after {
    content: "−";
  }

  .mobile-shop-menu__panel {
    border: 1px solid var(--line);
    border-top: var(--bar-sm) solid var(--oxide);
    background: var(--surface);
  }

  .mobile-shop-menu__panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-shop-menu__panel li + li {
    border-top: 1px solid var(--line);
  }

  .mobile-shop-menu__panel a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 1rem;
    font-weight: 600;
    color: var(--text-strong);
    text-decoration: none;
  }

  .mobile-shop-languages {
    border-top: var(--bar-sm) solid var(--blueprint);
  }

  .cut-sheet-hero {
    min-height: 0;
    padding: var(--form-pad);
  }

  .cut-sheet-hero::before {
    display: none;
  }

  .subject-ticket,
  .project-ticket,
  .proof-tickets,
  .article-review,
  .inactive-request-blueprint {
    padding: var(--form-pad);
    box-shadow: var(--shadow-offset-sm);
  }

  .inactive-request-blueprint__fields {
    grid-template-columns: 1fr;
  }

  .rfq-prompt {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "action";
    row-gap: 1rem;
  }

  .rfq-prompt .rfq-link {
    justify-self: start;
  }

  .shop-section {
    display: block;
  }

  .process-cards ol {
    grid-template-columns: 1fr;
  }

  .shop-demo-band {
    justify-content: flex-start;
  }
}

@media (max-width: 30rem) {
  :root {
    --fs-display: clamp(2.5rem, 10.5vw, 3.1rem);
    --fs-h2: clamp(1.8rem, 8vw, 2.4rem);
  }

  .cut-sheet-hero {
    padding-top: 1.4rem;
  }

  /* Tighter inset on the narrowest phones. Header, footer and content all
     read it from here, so they stay on one rail. */
  :root {
    --gutter: 0.75rem;
  }

  .shop-brand {
    font-size: 1.1rem;
  }

  .capability-scan,
  .ruled-index {
    grid-template-columns: 1fr;
  }

  .capability-scan li,
  .ruled-index li {
    min-height: 0;
  }
}

@media (max-width: 23rem) {
  .estimator-readiness__item {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .estimator-readiness__item dd {
    text-align: left;
  }

  .shop-header {
    gap: 0.7rem;
  }

  .breadcrumb-nav li,
  .breadcrumb-nav a {
    min-height: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  .capability-scan,
  .ruled-index,
  .shop-faq details,
  .shop-related a,
  .inactive-request-field dd {
    border-color: var(--line-strong);
  }

  .breadcrumb-nav,
  .drawing-mark {
    color: var(--text-strong);
  }
}

@media print {
  .skip-link,
  .mobile-shop-menu,
  .rfq-prompt,
  .rfq-link {
    display: none;
  }

  body {
    background: var(--white);
  }

  .cut-sheet-hero,
  .subject-ticket,
  .proof-tickets,
  .inactive-request-blueprint {
    box-shadow: none;
  }
}