@import url("/tokens.css");

/* Hallmark · macrostructure: Split Studio · H1 hero knobs: size=xxl, alignment=left-bias
 * theme: blue-white studio · studied: no · DNA-source: brief (user direction)
 * Design choices: harbor-industrial white, split studio hero, catalogue table, mastheaded footer.
 * Critique gates: P4H4E4S5R4V4 — hierarchy, contrast, evidence, structure, rhythm, variety.
 */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.accessibly-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  overflow-x: clip;
}
body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 4px; }
img { max-width: 100%; display: block; }
h1, h2, h3 { min-width: 0; overflow-wrap: anywhere; }
.container { width: min(1280px, calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; top: 0.5rem; left: 0.5rem; transform: translateY(-180%); background: var(--color-brand); color: var(--color-white); padding: 0.7rem 1rem; z-index: 100; font-weight: 600; }
.skip-link:focus { transform: translateY(0); }
.provenance-strip { background: var(--color-ink); color: var(--color-paper); font: 600 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.13em; }
.provenance-inner { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.preview-badge { color: var(--color-orange); }
.site-header { position: sticky; top: 0; z-index: 20; background: var(--color-paper); border-bottom: var(--rule-thin) solid var(--color-rule); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--color-ink); min-height: 44px; }
.brand-mark { width: 36px; height: 36px; flex: 0 0 auto; }
.brand-wordmark { display: inline-flex; align-items: baseline; gap: 0.28rem; font: 600 0.92rem/1 var(--font-mono); letter-spacing: .08em; }
.brand-wordmark strong { font-weight: 700; }
.brand-wordmark em { color: var(--color-brand); font-style: normal; }
.brand-wordmark span { font-size: .72em; letter-spacing: .15em; }
.primary-nav { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 2.2vw, 2.4rem); font-size: .9rem; }
.primary-nav > a:not(.nav-cta) { padding: 0.7rem 0; position: relative; }
.primary-nav > a:not(.nav-cta)::after { content: ""; position: absolute; height: 1px; background: var(--color-brand); left: 0; right: 100%; bottom: .25rem; transition: right var(--dur-standard) var(--ease-out); }
.primary-nav > a:not(.nav-cta):hover::after, .primary-nav > a:not(.nav-cta)[aria-current="page"]::after { right: 0; }
.nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 48px; padding: .78rem 1.1rem; border: 1px solid transparent; border-radius: var(--radius-sm); font: 600 .86rem/1 var(--font-mono); letter-spacing: .02em; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease; cursor: pointer; }
.nav-cta, .button { font-family: var(--font-body); }
.nav-cta, .button-dark, .button-orange { background: var(--color-brand); color: var(--color-white); }
.nav-cta:hover, .button-dark:hover, .button-orange:hover { background: var(--color-brand-hover); color: var(--color-white); transform: translateY(-2px); }
.button-outline { border-color: var(--color-brand); background: transparent; color: var(--color-brand); }
.button-outline:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); color: var(--color-white); transform: translateY(-2px); }
.menu-toggle { display: none; min-height: 44px; background: transparent; border: 0; padding: .5rem 0; color: var(--color-ink); font: 600 .8rem var(--font-mono); align-items: center; gap: .7rem; cursor: pointer; }
.menu-bars { display: flex; width: 24px; flex-direction: column; gap: 5px; }
.menu-bars i { display: block; height: 1px; background: currentColor; transition: transform var(--dur-standard) var(--ease-out); }
.menu-toggle[aria-expanded="true"] .menu-bars i:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-bars i:last-child { transform: translateY(-3px) rotate(-45deg); }

.eyebrow, .section-label { font: 600 var(--text-xs)/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--color-brand); }
.section-label { display: flex; align-items: center; gap: .75rem; }
.section-label::before { content: ""; width: 28px; height: 1px; background: var(--color-brand); }
.display { margin: 0; font: 650 var(--text-3xl)/.98 var(--font-display); letter-spacing: -.055em; }
.lede { color: var(--color-muted); font-size: clamp(1.03rem, 1.45vw, 1.2rem); line-height: 1.65; }
.muted { color: var(--color-muted); }
.hero { background: var(--color-paper); border-bottom: var(--rule-thin) solid var(--color-rule); }
.hero-grid { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr); gap: 64px; align-items: center; padding-block: 64px; }
.hero-copy { max-width: 660px; }
.hero-copy .eyebrow { margin-bottom: 1.5rem; color: var(--color-brand); }
.hero h1 { min-width: 0; max-width: none; margin: 0; font: 650 clamp(3.1rem, 5.2vw, 4.75rem)/1.02 var(--font-display); letter-spacing: -.062em; overflow-wrap: anywhere; }
.hero-title-main, .hero-title-location { display: block; }
.hero-title-location { margin-top: 1rem; color: var(--color-muted); font: 400 clamp(1.25rem, 2.2vw, 1.55rem)/1.2 var(--font-display); letter-spacing: -.035em; }
.hero-sub { max-width: 600px; margin: 2rem 0 2.1rem; font-size: clamp(1.05rem, 1.4vw, 1.23rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
.text-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .65rem .5rem; font-weight: 600; }
.text-link, .text-link span { color: var(--color-brand); }
.text-link span { transition: transform var(--dur-fast) var(--ease-out); }
.text-link:hover span { transform: translateX(4px); }
.hero-visual { min-width: 0; }
.hero-image { position: relative; min-height: 500px; background: var(--color-paper-deep); overflow: hidden; }
.hero-image::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-image img { width: 100%; height: 500px; object-fit: cover; object-position: center; }
.hero-image .image-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-muted); font: 600 .75rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.image-caption { min-width: 0; margin-top: .65rem; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .45rem 1rem; color: var(--color-muted); font: .7rem/1.3 var(--font-mono); letter-spacing: .04em; }
.image-caption span { min-width: 0; overflow-wrap: anywhere; }
.hero-facts { border-top: var(--rule-thin) solid var(--color-rule); margin-top: clamp(3rem, 5vw, 5rem); padding-top: 1rem; display: flex; align-items: flex-start; gap: clamp(1.5rem, 4vw, 4rem); font: .76rem/1.4 var(--font-mono); color: var(--color-muted); }
.hero-facts strong { display: block; color: var(--color-ink); font: 650 1rem/1.15 var(--font-display); letter-spacing: -.025em; margin-bottom: .25rem; }
.hero-facts .fact-highlight { color: var(--color-orange-dark); }

.section { padding-block: clamp(5rem, 10vw, 9rem); }
.section-tight { padding-block: clamp(3.5rem, 6vw, 5rem); }
.section-dark { background: var(--color-ink); color: var(--color-paper); }
.section-warm { background: var(--color-paper-deep); }
.section-dark .section-label::before,
.lure-banner .section-label::before { background: var(--color-brand-light); }
.section-head { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 3rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head h2 { max-width: 780px; }
.section-head p { max-width: 620px; margin: .5rem 0 0; }
.section-head .section-label { align-self: start; padding-top: .45rem; }
.section-head--single { grid-template-columns: 1fr; }
.section-head--single h2 { max-width: 800px; }

.doubts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-thin) solid var(--color-rule); }
.doubt { min-height: 230px; padding: 1.4rem clamp(1rem, 2.5vw, 2.2rem) 1.5rem 0; border-bottom: var(--rule-thin) solid var(--color-rule); }
.doubt + .doubt { padding-left: clamp(1rem, 2.5vw, 2.2rem); border-left: var(--rule-thin) solid var(--color-rule); }
.doubt-number { display: block; color: var(--color-brand); font: 600 .75rem var(--font-mono); margin-bottom: 3rem; }
.doubt h3 { margin: 0 0 .75rem; font: 600 1.5rem/1.05 var(--font-display); letter-spacing: -.04em; }
.doubt p { max-width: 32ch; margin: 0; color: var(--color-muted); font-size: .96rem; }

.stat-band { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr); gap: clamp(2rem, 7vw, 7rem); align-items: end; margin-top: 4.5rem; padding: 2rem 0 0; border-top: var(--rule-thin) solid var(--color-rule); }
.cluster-grid .stat-band { grid-column: 1 / -1; }
.stat-number { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem .7rem; color: var(--color-brand); overflow-wrap: anywhere; }
.stat-currency, .stat-unit { font: 600 .82rem/1.1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.stat-amount { font: 650 clamp(3.5rem, 7vw, 7.5rem)/.82 var(--font-display); letter-spacing: -.08em; }
.stat-meta { min-width: 0; color: var(--color-muted); font-size: .78rem; line-height: 1.45; overflow-wrap: anywhere; }
.stat-meta strong { display: block; color: var(--color-ink); font-size: .95rem; margin-bottom: .25rem; }
.stat-meta a { overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
.cluster-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .65fr); gap: clamp(3rem, 8vw, 9rem); align-items: center; }
.cluster-copy p { max-width: 64ch; }
.cluster-copy p + p { margin-top: 1.25rem; }
.cluster-schematic { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.cluster-schematic svg { display: block; width: 100%; max-width: 470px; height: auto; aspect-ratio: 480 / 390; flex-shrink: 0; }
.schematic-note { position: static; width: 100%; max-width: 45ch; color: var(--color-muted); font: .78rem/1.6 var(--font-mono); }

.product-gallery { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 1rem; margin-bottom: 4rem; }
.product-panel { min-height: 300px; border: var(--rule-thin) solid var(--color-rule); padding: 1.2rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.product-panel:first-child { background: var(--color-ink); color: var(--color-paper); }
.product-panel:nth-child(2) { background: var(--color-panel-sand); }
.product-panel:nth-child(3) { background: var(--color-panel-sage); }
.product-panel:first-child .product-panel-name small { color: var(--color-muted-on-dark); }
.product-panel svg [stroke="var(--color-orange)"],
.product-panel svg [stroke="var(--color-orange-dark)"] { stroke: var(--color-brand); }
.product-panel svg [fill="var(--color-orange)"],
.product-panel svg [fill="var(--color-orange-dark)"] { fill: var(--color-brand); }
.product-panel:first-child svg [stroke="var(--color-orange)"],
.product-panel:first-child svg [stroke="var(--color-orange-dark)"] { stroke: var(--color-brand-light); }
.product-panel:first-child svg [fill="var(--color-orange)"],
.product-panel:first-child svg [fill="var(--color-orange-dark)"] { fill: var(--color-brand-light); }
.product-panel svg { width: 100%; height: 180px; margin: auto; }
.product-panel-name { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1rem; border-top: var(--rule-thin) solid currentColor; padding-top: .75rem; font: 600 1rem var(--font-display); }
.product-panel-name > span { min-width: 0; overflow-wrap: anywhere; }
.product-panel-name small { flex: 0 0 100%; min-width: 0; font: .65rem var(--font-mono); color: var(--color-muted); overflow-wrap: anywhere; }
.product-table-wrap { overflow-x: auto; border-top: var(--rule-heavy) solid var(--color-ink); }
.product-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.product-table th, .product-table td { text-align: left; vertical-align: top; padding: 1.15rem 1rem; border-bottom: var(--rule-thin) solid var(--color-rule); }
.product-table th { color: var(--color-muted); font: 600 .7rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.product-table td:first-child { width: 24%; font: 600 1.1rem/1.2 var(--font-display); letter-spacing: -.025em; }
.product-table td:nth-child(2) { color: var(--color-muted); }
.product-table a { color: var(--color-brand); font: 600 .78rem var(--font-mono); white-space: nowrap; }
.product-table a:hover { text-decoration: underline; text-underline-offset: 3px; }
.section-note { max-width: 72ch; margin: 1.4rem 0 0; color: var(--color-muted); font-size: .94rem; }

.process-layout { display: grid; grid-template-columns: minmax(230px, .65fr) minmax(0, 1.35fr); gap: clamp(3rem, 8vw, 8rem); }
.process-intro { position: sticky; top: 120px; align-self: start; }
.process-intro h2 { max-width: 7ch; margin-top: 1.1rem; font-size: clamp(3rem, 5.3vw, 5rem); }
.steps { border-top: var(--rule-thin) solid var(--color-rule); }
.step { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 1.5rem; padding: 1.7rem 0 1.8rem; border-bottom: var(--rule-thin) solid var(--color-rule); }
.step-number { color: var(--color-brand); font: 600 .85rem var(--font-mono); }
.step h3 { margin: 0 0 .55rem; font: 600 1.55rem/1.05 var(--font-display); letter-spacing: -.04em; }
.step p { margin: 0; color: var(--color-muted); max-width: 62ch; }
.section-dark .step, .section-dark .steps { border-color: var(--color-rule-dark); }
.section-dark .section-label { color: var(--color-brand-light); }
.section-dark .lede,
.section-dark .section-note,
.section-dark .muted,
.section-dark .step p { color: var(--color-muted-on-dark); }
.section-dark .step-number { color: var(--color-brand-light); }
.section-dark .step h3 { color: var(--color-paper); }
.section-dark :focus-visible,
.site-footer :focus-visible,
.lure-banner :focus-visible,
.rfq-aside-card :focus-visible { outline-color: var(--color-brand-light); }

.verification-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-thin) solid var(--color-rule); }
.verification { padding: 1.35rem 2rem 0 0; min-height: 230px; }
.verification + .verification { padding-left: 2rem; border-left: var(--rule-thin) solid var(--color-rule); }
.verification-number { display: block; margin-bottom: 2.5rem; color: var(--color-brand); font: .75rem var(--font-mono); }
.verification h3 { margin: 0 0 .7rem; font: 600 1.35rem/1.1 var(--font-display); letter-spacing: -.035em; }
.verification p { margin: 0; color: var(--color-muted); font-size: .93rem; }
.not-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.not-item { padding-top: 1rem; border-top: var(--rule-heavy) solid var(--color-brand); }
.not-item h3 { margin: 0 0 .6rem; font: 600 1.35rem/1.1 var(--font-display); letter-spacing: -.03em; }
.not-item p { margin: 0; color: var(--color-muted); }

.faq-list { border-top: var(--rule-heavy) solid var(--color-ink); }
.faq-item { border-bottom: var(--rule-thin) solid var(--color-rule); }
.faq-item summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; cursor: pointer; list-style: none; font: 600 1.18rem/1.2 var(--font-display); letter-spacing: -.025em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--color-brand); font: 1.5rem var(--font-mono); transition: transform var(--dur-standard) var(--ease-out); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { max-width: 70ch; margin: 0 4rem 1.4rem 0; color: var(--color-muted); }

.final-cta { padding-block: clamp(4rem, 8vw, 7rem); background: var(--color-brand); color: var(--color-white); }
.final-cta-inner { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.final-cta h2 { max-width: 8ch; margin: 0; font-size: clamp(3rem, 6vw, 6rem); }
.final-cta p { max-width: 40ch; margin: 0 0 .6rem; color: #e6f3f8; }
.final-cta .section-label { color: var(--color-white); }
.final-cta .section-label::before { background: var(--color-white); }
.final-cta .button,
.final-cta .button-dark,
.final-cta .button-orange { background: var(--color-white); color: var(--color-brand); }
.final-cta .button:hover,
.final-cta .button-dark:hover,
.final-cta .button-orange:hover { background: var(--color-paper-deep); color: var(--color-brand-hover); }
.final-cta :focus-visible { outline-color: var(--color-brand-light); }

.site-footer { background: var(--color-ink); color: var(--color-paper); }
.footer-top { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 4rem; padding-block: 4rem 5rem; }
.brand-footer { color: var(--color-paper); }
.brand-footer .brand-wordmark em,
.site-footer .brand-wordmark em { color: var(--color-brand-light); }
.footer-note { max-width: 32ch; margin: 1.25rem 0 0; color: var(--color-muted-on-dark); font-size: .92rem; }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; min-width: 0; }
.footer-links > div { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.footer-label { margin-bottom: .5rem; color: var(--color-brand-light); font: .7rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.footer-links a { min-width: 0; color: var(--color-paper); font-size: .88rem; overflow-wrap: anywhere; }
.footer-links a:hover { color: var(--color-brand-light); }
.footer-links small { color: var(--color-muted-on-dark); font-size: .7rem; }
.footer-bottom { min-height: 58px; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; border-top: var(--rule-thin) solid var(--color-rule-dark); color: var(--color-muted-on-dark); font: .68rem var(--font-mono); }

/* Product and utility pages */
.page-hero { padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem); border-bottom: var(--rule-thin) solid var(--color-rule); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .7fr); gap: 3rem; align-items: end; }
.page-hero h1 { min-width: 0; max-width: 9ch; margin: 1rem 0 1.2rem; font: 650 clamp(3.3rem, 7vw, 6.6rem)/.9 var(--font-display); letter-spacing: -.065em; overflow-wrap: anywhere; }
.page-hero .lede { max-width: 52ch; }
.page-hero-aside { border-left: var(--rule-heavy) solid var(--color-brand); padding: .5rem 0 .5rem 1.2rem; }
.page-hero-aside strong { display: block; margin-bottom: .5rem; font: 600 1.25rem/1.1 var(--font-display); }
.page-hero-aside span { color: var(--color-muted); font: .7rem/1.4 var(--font-mono); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr); gap: clamp(3rem, 8vw, 8rem); }
.detail-copy h2 { margin: 0 0 1.1rem; font: 600 2.3rem/.98 var(--font-display); letter-spacing: -.05em; }
.detail-copy p { max-width: 64ch; color: var(--color-muted); }
.detail-aside { border-top: var(--rule-heavy) solid var(--color-ink); }
.detail-fact { padding: 1rem 0; border-bottom: var(--rule-thin) solid var(--color-rule); }
.detail-fact span { display: block; color: var(--color-muted); font: .68rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .35rem; }
.detail-fact strong { font: 600 1.05rem/1.25 var(--font-display); }
.callout { margin-top: 2rem; padding: 1.2rem; border-left: 3px solid var(--color-brand); background: var(--color-paper-deep); color: var(--color-muted); }
.lure-banner { background: var(--color-ink); color: var(--color-paper); padding-block: 4rem; }
.lure-banner-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr); gap: 3rem; align-items: end; }
.lure-banner h2 { margin: .8rem 0 0; font: 600 clamp(2.4rem, 5vw, 5rem)/.92 var(--font-display); letter-spacing: -.06em; }
.lure-banner .section-label { color: var(--color-brand-light); }
.lure-banner p { margin: 0; color: var(--color-muted-on-dark); }
.range-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--rule-thin) solid var(--color-rule); }
.range-item { padding: 1.4rem 1.2rem 1.5rem 0; border-bottom: var(--rule-thin) solid var(--color-rule); }
.range-item:nth-child(even) { padding-left: 1.2rem; border-left: var(--rule-thin) solid var(--color-rule); }
.range-item h3 { margin: 0 0 .4rem; font: 600 1.15rem/1.1 var(--font-display); }
.range-item p { margin: 0; color: var(--color-muted); }

/* RFQ */
.rfq-hero { padding-block: 4.5rem 3rem; border-bottom: var(--rule-thin) solid var(--color-rule); }
.rfq-hero h1 { min-width: 0; margin: .8rem 0 1rem; max-width: 8ch; font: 650 clamp(3.5rem, 7vw, 6.2rem)/.9 var(--font-display); letter-spacing: -.065em; overflow-wrap: anywhere; }
.rfq-intro { max-width: 62ch; color: var(--color-muted); }
.rfq-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: clamp(3rem, 8vw, 8rem); padding-block: 4rem 7rem; }
.rfq-form { min-width: 0; }
.form-section { padding-block: 0 2.8rem; margin-bottom: 2.8rem; border-bottom: var(--rule-thin) solid var(--color-rule); }
.form-section h2 { margin: 0 0 1.6rem; font: 600 1.75rem/1.05 var(--font-display); letter-spacing: -.04em; }
.form-section h2 span { display: block; margin-bottom: .5rem; color: var(--color-brand); font: .7rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
.field { min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: .45rem; font-size: .86rem; font-weight: 600; }
.required { color: var(--color-orange-dark); }
.field input, .field select, .field textarea { display: block; width: 100%; min-height: 48px; border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-ink); padding: .75rem .8rem; }
.field textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-brand); outline: 3px solid var(--color-focus); outline-offset: 0; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--color-orange-dark); }
.help { display: block; margin-top: .38rem; color: var(--color-muted); font-size: .75rem; }
.field-error { display: block; min-height: 1.05rem; margin-top: .3rem; color: var(--color-orange-dark); font-size: .75rem; }
.choice-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.choice-row label { position: relative; min-width: 80px; margin: 0; }
.choice-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-row span { display: grid; min-height: 48px; place-items: center; padding: .6rem .8rem; border: 1px solid var(--color-rule); background: var(--color-white); border-radius: var(--radius-sm); font: 600 .8rem var(--font-mono); cursor: pointer; }
.choice-row input:checked + span { background: var(--color-brand); color: var(--color-white); border-color: var(--color-brand); }
.choice-row input:focus-visible + span { outline: 3px solid var(--color-brand); outline-offset: 2px; }
.consent { display: flex; align-items: flex-start; gap: .75rem; margin: 1rem 0 0; color: var(--color-muted); font-size: .82rem; }
.consent input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .1rem; accent-color: var(--color-brand); }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.form-actions .button { min-width: 180px; }
.submit-status { min-height: 1.4rem; color: var(--color-muted); font-size: .82rem; }
.submit-status.is-error { color: var(--color-orange-dark); }
.submit-status.is-success { color: var(--color-ink); }
.submit-fallback-email { color: var(--color-brand); text-decoration: underline; text-underline-offset: .18em; }
.rfq-aside { align-self: start; position: sticky; top: 120px; }
.rfq-aside-card { padding: 1.3rem; background: var(--color-ink); color: var(--color-paper); }
.rfq-aside-card h2 { margin: 0 0 .7rem; font: 600 1.65rem/1 var(--font-display); letter-spacing: -.04em; }
.rfq-aside-card p { margin: 0; color: var(--color-muted-on-dark); font-size: .9rem; }
.rfq-aside-card ul { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: var(--rule-thin) solid var(--color-rule-dark); }
.rfq-aside-card li { padding: .8rem 0; border-bottom: var(--rule-thin) solid var(--color-rule-dark); font-size: .8rem; }
.rfq-aside-card li::before { content: "↗"; color: var(--color-brand-light); margin-right: .55rem; }
.rfq-aside-note { margin-top: 1.2rem; padding: 1rem 0; border-top: var(--rule-thin) solid var(--color-rule); color: var(--color-muted); font-size: .8rem; }
.rfq-progress { margin-bottom: 2rem; padding: 1rem 0 1.2rem; border-top: var(--rule-heavy) solid var(--color-brand); border-bottom: var(--rule-thin) solid var(--color-rule); }
.rfq-progress > strong { display: block; margin-top: .45rem; font: 600 1.25rem/1.1 var(--font-display); }
.rfq-step-indicators { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.rfq-step-indicators li { min-width: 0; padding: .65rem .7rem; border-top: 2px solid var(--color-rule); color: var(--color-muted); }
.rfq-step-indicators li.is-current { border-color: var(--color-brand); color: var(--color-ink); }
.rfq-step-indicators li span { display: block; margin-bottom: .25rem; font: .68rem var(--font-mono); letter-spacing: .08em; }
.rfq-step-indicators li strong { display: block; overflow-wrap: anywhere; font-size: .82rem; }
.rfq-prompt { max-width: 62ch; margin: 0 0 2rem; color: var(--color-muted); font-size: .88rem; }
.form-step-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.form-step-actions .button { min-width: 150px; }
.form-step-actions .submit-status { margin-right: auto; }
.failure-panel { padding: 1.3rem; margin-bottom: 2rem; border-left: 3px solid var(--color-orange-dark); background: var(--color-paper-deep); }
.failure-panel h2 { margin: 0 0 .6rem; font: 600 1.6rem/1 var(--font-display); }
.failure-panel p { max-width: 65ch; margin: 0 0 1rem; color: var(--color-muted); }
.success-panel { display: block; padding: 1.3rem; margin-bottom: 2rem; border-left: 3px solid var(--color-brand); background: var(--color-paper-deep); }
.success-panel.is-visible { display: block; }
.success-panel h2 { margin: 0 0 .6rem; font: 600 1.6rem/1 var(--font-display); }
.success-panel p { max-width: 65ch; margin: 0; color: var(--color-muted); }

.notice-page { padding-block: 5rem 8rem; }
.notice-page h1 { margin: .9rem 0 1.2rem; font: 650 clamp(3rem, 6vw, 6rem)/.92 var(--font-display); letter-spacing: -.065em; }
.notice-page .lede { max-width: 60ch; }
.notice-copy { max-width: 780px; margin-top: 4rem; }
.notice-copy h2 { margin: 2.4rem 0 .8rem; font: 600 1.8rem/1 var(--font-display); letter-spacing: -.04em; }
.notice-copy p, .notice-copy li { color: var(--color-muted); }
.notice-copy a,
.consent a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }
.notice-copy ul { padding-left: 1.2rem; }
.data-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.status-card { min-height: 160px; padding: 1.2rem; border-top: var(--rule-heavy) solid var(--color-brand); background: var(--color-paper-deep); }
.status-card span { display: block; margin-bottom: 2.4rem; color: var(--color-muted); font: .7rem var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.status-card strong { font: 600 1.25rem/1.1 var(--font-display); }
.status-card strong a { color: var(--color-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; overflow-wrap: anywhere; }
.status-card p { margin: .7rem 0 0; color: var(--color-muted); font-size: .84rem; }
.data-status-page .notice-copy { margin-top: 4.5rem; }
.data-status-page .status-verification-grid { margin-top: 1.5rem; }
.fact-highlight a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.rfq-unavailable { max-width: 70ch; margin-bottom: 2rem; }
.rfq-unavailable a { display: inline-block; margin-top: .55rem; color: var(--color-brand); font-weight: 650; text-decoration: underline; text-underline-offset: .18em; }

@media (max-width: 900px) {
  .container { width: min(100% - 40px, 720px); }
  .header-inner { min-height: 74px; }
  .menu-toggle { display: inline-flex; }
  .primary-nav { position: absolute; inset: 100% 0 auto; display: none; padding: 1rem 20px 1.4rem; background: var(--color-paper); border-bottom: var(--rule-thin) solid var(--color-rule); box-shadow: 0 12px 24px var(--color-shadow-nav); }
  .primary-nav.is-open { display: flex; align-items: stretch; flex-direction: column; gap: .2rem; }
  .primary-nav > a { min-height: 44px; display: flex; align-items: center; }
  .primary-nav > a:not(.nav-cta)::after { bottom: 0; }
  .nav-cta { justify-content: space-between; margin-top: .6rem; }
  .hero-grid, .cluster-grid, .detail-grid, .rfq-layout, .process-layout, .page-hero-grid, .lure-banner-inner, .footer-top { grid-template-columns: 1fr; }
  .hero-grid { gap: 3rem; padding-block: 4.5rem 5rem; }
  .hero-image, .hero-image img { min-height: 400px; height: 400px; }
  .hero-facts { gap: 1.4rem; flex-wrap: wrap; }
  .section-head { grid-template-columns: 1fr; gap: 1rem; }
  .section-head .section-label { order: -1; }
  .process-intro { position: static; }
  .process-intro h2 { max-width: 12ch; }
  .rfq-aside { position: static; }
  .footer-links { margin-top: 1rem; }
}

@media (max-width: 620px) {
  .container { width: calc(100% - 32px); }
  .provenance-inner { min-height: 44px; font-size: .62rem; letter-spacing: .08em; }
  .provenance-inner span:first-child { max-width: 14ch; line-height: 1.2; }
  .preview-badge { max-width: 20ch; text-align: right; line-height: 1.2; }
  .hero h1 { max-width: none; }
  .hero-title-main { font-size: clamp(2.7rem, 10vw, 3.6rem); }
  .display { font-size: clamp(2.2rem, 7vw, 3.3rem); }
  .page-hero h1, .rfq-hero h1 { max-width: 10ch; }
  .hero-grid { padding-block: 3.5rem 4rem; }
  .hero-image, .hero-image img { min-height: 300px; height: 300px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button, .hero-actions .text-link { width: 100%; }
  .hero-actions .text-link { justify-content: space-between; }
  .hero-facts { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-facts > div:first-child { grid-column: 1 / -1; }
  .product-gallery { grid-template-columns: 1fr; }
  .product-panel { min-height: 250px; }
  .doubts, .verification-grid, .not-grid { grid-template-columns: 1fr; }
  .doubt, .verification { min-height: auto; padding: 1.25rem 0 1.6rem; }
  .doubt + .doubt, .verification + .verification { padding-left: 0; border-left: 0; }
  .doubt-number, .verification-number { margin-bottom: 1.4rem; }
  .stat-band { grid-template-columns: 1fr; gap: 1.2rem; }
  .stat-number { flex-direction: column; align-items: flex-start; gap: .22rem; }
  .range-list, .data-status-grid { grid-template-columns: 1fr; }
  .range-item:nth-child(even) { padding-left: 0; border-left: 0; }
  .step { grid-template-columns: 2.4rem minmax(0, 1fr); gap: .6rem; }
  .step h3 { font-size: 1.35rem; }
  .final-cta-inner { display: block; }
  .final-cta p { margin: 1.4rem 0 1.5rem; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .footer-links > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { min-height: auto; padding-block: 1rem; flex-direction: column; align-items: flex-start; gap: .3rem; }
  .form-grid { grid-template-columns: 1fr; }
  .rfq-step-indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-full { grid-column: auto; }
  .choice-row label { flex: 1 1 calc(50% - .55rem); }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .button { width: 100%; }
  .form-step-actions { align-items: stretch; flex-direction: column; }
  .form-step-actions .button { width: 100%; }
  .form-step-actions .submit-status { margin: 0; }
}

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

/* Hallmark critique stamp: asymmetric split hero and catalogue table carry the hierarchy;
   the buyer doubts use rules and numbered prose instead of equal icon cards; the footer is
   mastheaded and compact. Keep the white/navy/blue tokens intact when extending routes. */