/* Hallmark · macrostructure: Narrative Workflow · tone: engineer-to-engineer · anchor hue: cobalt
 * nav: N1b, links=6, dropdowns=none, scroll=always-solid · footer: Ft2, order=credit/wordmark/links, separator=middot, density=spaced
 * pre-emit critique: P5 H5 E5 S5 R5 V4 · contrast: pass (40–41) · nav: N1b · footer: Ft2 · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 */
@import url("./tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; overflow-x: clip; }
html { scroll-behavior: smooth; }
body { color: var(--color-ink); background: var(--color-paper); font-family: var(--font-body); line-height: 1.65; }
body.is-nav-open { overflow: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, summary { font: inherit; }
h1, h2, h3 { margin: 0; min-width: 0; color: var(--color-ink); font-family: var(--font-display); font-style: normal; line-height: 1.08; overflow-wrap: anywhere; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.skip-link { position: fixed; inset-block-start: var(--space-sm); inset-inline-start: var(--space-sm); z-index: 500; padding: var(--space-sm) var(--space-md); color: var(--color-paper-raised); background: var(--color-ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(74rem, calc(100% - 2rem)); margin-inline: auto; }

.site-header { position: sticky; inset-block-start: 0; z-index: 300; border-block-end: var(--rule-thin) solid var(--color-rule); background: var(--color-paper-raised); }
.site-header__inner { min-height: 4.5rem; display: grid; grid-template-columns: auto auto; align-items: center; justify-content: space-between; gap: var(--space-md); }
.brand { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; white-space: nowrap; }
.brand img { width: 4.75rem; height: 3.2rem; object-fit: contain; }
.nav-toggle { min-width: 5.5rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); color: var(--color-ink); background: var(--color-paper-raised); cursor: pointer; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.nav-toggle:hover, .nav-toggle.is-hover { background: var(--color-accent-soft); }
.nav-toggle:active, .nav-toggle.is-active { transform: translateY(1px); }
.nav-toggle:disabled, .nav-toggle[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.nav-toggle[data-state="loading"] { cursor: wait; }
.nav-toggle[data-state="error"] { border-color: var(--color-error); }
.nav-toggle[data-state="success"] { border-color: var(--color-success); }
.nav-toggle__mark { width: 1rem; height: 0.75rem; position: relative; border-block: 2px solid currentColor; }
.nav-toggle__mark::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: calc(50% - 1px); border-block-start: 2px solid currentColor; }
.site-nav { display: none; grid-column: 1 / -1; padding-block: var(--space-sm) var(--space-md); border-block-start: var(--rule-thin) solid var(--color-rule); }
.site-nav.is-open { display: grid; gap: var(--space-sm); }
.nav-links { display: grid; list-style: none; }
.nav-links a, .nav-cta { min-height: 2.75rem; display: inline-flex; align-items: center; text-decoration: none; font-size: var(--text-sm); font-weight: 650; white-space: nowrap; }
.nav-links a { color: var(--color-ink-soft); }
.nav-links a:hover { color: var(--color-accent); }
.nav-cta { justify-content: center; padding-inline: var(--space-lg); border-radius: var(--radius-sm); color: var(--color-accent-ink); background: var(--color-accent); }

.action { min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--space-lg); border: var(--rule-thin) solid var(--color-accent); border-radius: var(--radius-sm); color: var(--color-accent-ink); background: var(--color-accent); font-weight: 700; text-decoration: none; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.action:hover, .action.is-hover { background: var(--color-accent-strong); }
.action:active, .action.is-active { transform: translateY(1px); }
.action[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.action[data-state="loading"] { cursor: wait; }
.action[data-state="error"] { background: var(--color-error); border-color: var(--color-error); }
.action[data-state="success"] { background: var(--color-success); border-color: var(--color-success); }
.action--quiet { color: var(--color-accent-strong); background: transparent; }
.action--quiet:hover { color: var(--color-accent-ink); background: var(--color-accent-strong); }

.hero { padding-block-start: var(--space-3xl); padding-block-end: var(--space-4xl); border-block-end: var(--rule-strong) solid var(--color-accent); background: var(--color-paper-raised); }
.hero__grid { display: grid; gap: var(--space-2xl); }
.language-note { margin-block-end: var(--space-lg); color: var(--color-accent-strong); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; }
.hero h1 { max-width: 18ch; font-size: var(--text-display-s); }
.hero__lead { max-width: 63ch; margin-block-start: var(--space-lg); color: var(--color-ink-soft); font-size: var(--text-lead); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-xl); }
.input-brief { align-self: end; border-block-start: var(--rule-strong) solid var(--color-ink); padding-block-start: var(--space-lg); }
.input-brief h2 { font-size: var(--text-2xl); }
.input-brief ul { margin-block-start: var(--space-lg); list-style: none; counter-reset: inputs; }
.input-brief li { min-height: 2.8rem; display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: var(--space-sm); border-block-end: var(--rule-thin) solid var(--color-rule); color: var(--color-ink-soft); }
.input-brief li::before { counter-increment: inputs; content: counter(inputs, decimal-leading-zero); color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; }

.answer { margin-block: var(--space-2xl); padding: var(--space-xl); border-inline-start: var(--rule-strong) solid var(--color-accent); background: var(--color-accent-soft); }
.answer h2 { margin-block-end: var(--space-sm); font-size: var(--text-2xl); }
.answer p { max-width: 74ch; color: var(--color-ink-soft); font-size: var(--text-lead); }

.process { padding-block: var(--space-3xl) var(--space-4xl); }
.process__head { display: grid; gap: var(--space-md); margin-block-end: var(--space-2xl); }
.process__head h2 { max-width: 18ch; font-size: var(--text-3xl); }
.process__head p { max-width: 62ch; color: var(--color-ink-soft); }
.flow-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: var(--rule-thin) solid var(--color-rule); margin-block-end: var(--space-2xl); }
.flow-strip span { min-height: 4rem; display: grid; place-items: center; padding: var(--space-sm); border-inline-end: var(--rule-thin) solid var(--color-rule); color: var(--color-ink-soft); font-family: var(--font-mono); font-size: var(--text-xs); text-align: center; }
.flow-strip span:nth-child(even) { border-inline-end: 0; }
.stage { display: grid; gap: var(--space-lg); padding-block: var(--space-2xl); border-block-start: var(--rule-strong) solid var(--color-ink); }
.stage__index { color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; }
.stage__copy h3 { max-width: 22ch; font-size: var(--text-2xl); }
.stage__copy p { max-width: 66ch; margin-block-start: var(--space-sm); color: var(--color-ink-soft); }
.stage__inputs { align-self: start; padding-block-start: var(--space-sm); border-block-start: var(--rule-thin) solid var(--color-rule); }
.stage__inputs strong { display: block; margin-block-end: var(--space-sm); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; }
.stage__inputs ul { display: grid; gap: var(--space-xs); padding-inline-start: 1.1rem; color: var(--color-ink-soft); }
.stage__question { grid-column: 1 / -1; padding-block-start: var(--space-md); border-block-start: var(--rule-thin) solid var(--color-rule); color: var(--color-ink); font-weight: 700; }

.format-section { padding-block: var(--space-4xl); background: var(--color-paper-muted); }
.format-section h2, .market h2, .rfq h2, .faq h2 { font-size: var(--text-3xl); }
.section-intro { max-width: 66ch; margin-block-start: var(--space-md); color: var(--color-ink-soft); }
.format-list { margin-block-start: var(--space-2xl); border-block-start: var(--rule-strong) solid var(--color-ink); }
.format-row { display: grid; gap: var(--space-md); padding-block: var(--space-xl); border-block-end: var(--rule-thin) solid var(--color-rule); }
.format-row h3 { font-size: var(--text-2xl); }
.format-row p { color: var(--color-ink-soft); }
.format-row ul { padding-inline-start: 1.1rem; color: var(--color-ink-soft); }

.market { padding-block: var(--space-4xl); }
.market__grid { display: grid; gap: var(--space-2xl); }
.market__note { padding: var(--space-xl); border-block: var(--rule-thin) solid var(--color-rule); background: var(--color-paper-raised); }
.market__note h3 { font-size: var(--text-2xl); }
.market__note p { margin-block-start: var(--space-sm); color: var(--color-ink-soft); }
.market__note ul { display: grid; gap: var(--space-sm); margin-block-start: var(--space-lg); padding-inline-start: 1.1rem; }

.rfq { padding-block: var(--space-4xl); color: var(--color-paper-raised); background: var(--color-ink); }
.rfq h2 { color: var(--color-paper-raised); }
.rfq .section-intro { color: var(--color-paper-muted); }
.rfq-list { display: grid; gap: 0; margin-block: var(--space-2xl); list-style: none; counter-reset: rfq; }
.rfq-list li { min-height: 4rem; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: var(--space-sm); border-block-start: var(--rule-thin) solid var(--color-ink-faint); }
.rfq-list li::before { counter-increment: rfq; content: counter(rfq, decimal-leading-zero); color: var(--color-focus); font-family: var(--font-mono); font-size: var(--text-xs); }

.faq { padding-block: var(--space-4xl); }
.faq-list { margin-block-start: var(--space-2xl); border-block-start: var(--rule-strong) solid var(--color-ink); }
.faq details { border-block-end: var(--rule-thin) solid var(--color-rule); }
.faq summary { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); cursor: pointer; font-weight: 700; list-style: none; white-space: nowrap; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; color: var(--color-accent); font-family: var(--font-mono); }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover, .faq summary.is-hover { color: var(--color-accent-strong); }
.faq summary:active, .faq summary.is-active { transform: translateY(1px); }
.faq summary[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.faq details[data-state="loading"] summary { cursor: wait; }
.faq details[data-state="error"] summary { color: var(--color-error); }
.faq details[data-state="success"] summary { color: var(--color-success); }
.faq details p { max-width: 74ch; padding-block: 0 var(--space-lg); color: var(--color-ink-soft); }

.final-cta { padding-block: var(--space-4xl); border-block-start: var(--rule-strong) solid var(--color-accent); background: var(--color-paper-raised); }
.final-cta__grid { display: grid; gap: var(--space-xl); align-items: end; }
.final-cta h2 { max-width: 18ch; font-size: var(--text-3xl); }
.final-cta p { max-width: 66ch; color: var(--color-ink-soft); }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.footer { padding-block: var(--space-xl); border-block-start: var(--rule-thin) solid var(--color-rule); color: var(--color-ink-soft); background: var(--color-paper-raised); font-size: var(--text-sm); }
.footer__line { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.footer a { color: var(--color-accent-strong); text-decoration: none; white-space: nowrap; }
.footer a:hover { text-decoration: underline; }

@media (min-width: 40rem) {
  .shell { width: min(74rem, calc(100% - 3rem)); }
  .flow-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow-strip span:nth-child(even) { border-inline-end: var(--rule-thin) solid var(--color-rule); }
  .flow-strip span:nth-child(3n) { border-inline-end: 0; }
  .format-row { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr) minmax(0, 1fr); }
  .rfq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
  .final-cta__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .footer__line { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 60rem) {
  .site-header__inner { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xl); }
  .nav-toggle { display: none; }
  .site-nav { display: grid; grid-column: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-xl); padding: 0; border: 0; }
  .nav-links { display: flex; align-items: center; justify-content: center; gap: clamp(var(--space-sm), 1.25vw, var(--space-lg)); }
  .hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr); }
  .process__head { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: end; }
  .flow-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .flow-strip span, .flow-strip span:nth-child(even), .flow-strip span:nth-child(3n) { border-inline-end: var(--rule-thin) solid var(--color-rule); }
  .flow-strip span:last-child { border-inline-end: 0; }
  .stage { grid-template-columns: 5rem minmax(0, 1.4fr) minmax(17rem, 0.6fr); }
  .stage__question { grid-column: 2 / -1; }
  .market__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

@media (hover: hover) and (pointer: fine) {
  .stage:hover .stage__index { transform: translateX(0.2rem); }
  .stage__index { transition: transform var(--dur-base) var(--ease-out); }
}

@media (pointer: coarse) {
  .action, .nav-toggle, .nav-links a, .nav-cta, .faq summary { min-height: 3rem; }
}

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