:root {
  --steel: #14476f;
  --electric: #0f7fd4;
  --graphite: #1b252c;
  --zinc: #aebcc6;
  --amber: #e08a22;
  --paper: #f6f7f9;
  --white: #fff;
  --line: #d7e0e6;
  --muted: #64757f;
  --signal: #63d7aa;
  --night: #0d1418;
  --night-raised: #111d23;
  --night-line: #2e414b;
  --font-display: "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-mono: "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; color: var(--graphite); background: var(--paper); font-family: var(--font-body); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
svg { display: block; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .75rem 1rem; background: var(--white); color: var(--graphite); }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid #75cfff; outline-offset: 4px; }

.site-header { min-height: 120px; display: grid; grid-template-columns: 200px 1fr auto; align-items: center; gap: 2rem; padding: 0 max(4vw, 1.25rem); color: #d8e4e9; background: var(--night); border-bottom: 1px solid var(--night-line); }
.brand { display: flex; flex-direction: column; line-height: 1; }
.site-nav { display: flex; justify-content: center; gap: clamp(1rem, 2.4vw, 2.6rem); font: .8rem/1 var(--font-mono); letter-spacing: .02em; text-transform: uppercase; }
.site-nav a::before { content: "+"; margin-right: .45rem; color: #5e7a87; }
.site-nav a:hover, .text-link:hover { color: #75cfff; }
.header-actions { display: flex; align-items: center; gap: 1.2rem; font-size: .82rem; font-weight: 600; }
.text-link { color: #a5b7c0; }
.menu-button { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--steel); background: var(--white); border: 1px solid var(--line); }
.menu-button svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1.35rem; border: 1px solid var(--steel); background: var(--steel); color: var(--white); font-size: .86rem; font-weight: 700; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.button:hover { background: var(--electric); border-color: var(--electric); }
.button--compact { min-height: 40px; padding: .5rem 1rem; color: var(--night); background: var(--signal); border-color: var(--signal); }
.button--bright { color: var(--night); background: var(--signal); border-color: var(--signal); }
.button--bright:hover { color: var(--night); background: #9ceacb; border-color: #9ceacb; }
.button--outline { color: #d2e2ea; background: transparent; border-color: #496573; }
.button--light { color: var(--steel); background: var(--white); border-color: var(--white); }

.hero { min-height: 820px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(480px, 1.05fr); align-items: center; gap: clamp(3rem, 6vw, 7rem); position: relative; padding: clamp(5rem, 8vw, 8rem) max(5vw, 1.25rem); overflow: hidden; color: #d8e4e9; background: var(--night); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(110,197,248,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(110,197,248,.05) 1px, transparent 1px); background-size: 28px 28px; }
.hero__copy, .result-window { min-width: 0; position: relative; z-index: 1; }
.system-label, .eyebrow { color: #8ba3ae; font: .78rem/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.system-label { display: flex; align-items: center; gap: .7rem; margin: 0 0 2rem; }
.system-label span { width: 8px; height: 8px; background: var(--signal); border-radius: 50%; box-shadow: 0 0 0 5px rgba(99,215,170,.12); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0; }
h1 { max-width: 760px; margin-bottom: 1.6rem; color: #eef5f7; font-size: clamp(3.8rem, 6vw, 6.9rem); font-weight: 600; line-height: .9; text-transform: uppercase; }
h1 em { color: #75cfff; font-style: normal; }
.hero__lede { max-width: 650px; margin-bottom: 2rem; color: #9bafb9; font-size: 1.06rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.trial-facts { display: flex; flex-wrap: wrap; gap: .65rem 1.5rem; margin: 1.4rem 0 0; padding: 0; color: #9db2bc; font: .78rem/1.5 var(--font-mono); list-style: none; }
.trial-facts li + li::before { content: "·"; margin-right: 1.5rem; color: var(--amber); }

.result-window { margin: 0; background: var(--night-raised); border: 1px solid #44616f; box-shadow: 15px 15px 0 #17242b; }
.result-window__bar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.2rem; border-bottom: 1px solid #3b515c; font: .78rem/1.35 var(--font-mono); }
.result-window__bar i { width: 7px; height: 7px; display: inline-block; margin-right: .55rem; background: var(--signal); border-radius: 50%; }
.result-window__bar strong { color: var(--signal); font-size: .74rem; text-transform: uppercase; }
.panel-stage { position: relative; padding: 3rem 2.4rem 2.5rem; }
.dimension { position: absolute; color: #8fa4ae; font: .68rem/1.2 var(--font-mono); }
.dimension--width { top: 1.25rem; left: 2.4rem; right: 2.4rem; padding-top: .4rem; border-top: 1px solid #4c626d; text-align: center; }
.sample-panels { display: grid; gap: .8rem; }
.sample-panel { min-height: 105px; display: flex; position: relative; overflow: hidden; background: var(--amber); border: 2px solid #8aa0aa; }
.sample-panel__used { display: flex; align-items: center; padding: .8rem; color: #e9f3f7; background-color: var(--steel); background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,.12) 9px 10px); font: .6rem/1.3 var(--font-mono); }
.sample-panel__used--25 { width: 25%; }
.sample-panel__used--75 { width: 75.3%; }
.sample-panel__waste { position: absolute; right: .7rem; bottom: .55rem; color: #3c280b; font: .68rem/1.2 var(--font-mono); }
.result-preview { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; padding: 1.5rem; }
.preview-panel { min-height: 245px; display: grid; grid-template-columns: 1.2fr .9fr .75fr .22fr; gap: 3px; padding: 4px; background: #071014; border: 2px solid #8aa0aa; }
.preview-piece, .preview-offcut { min-width: 0; display: flex; align-items: center; padding: .55rem; overflow: hidden; font: .7rem/1.3 var(--font-mono); text-transform: uppercase; }
.preview-piece { color: #eaf3f7; background-color: var(--steel); background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,.12) 9px 10px); }
.preview-piece--2 { background-color: #1b5d8d; }
.preview-piece--3 { background-color: #216b9e; }
.preview-offcut { color: #3c280b; background-color: var(--amber); writing-mode: vertical-rl; }
.preview-checks { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 0; color: #a1b4bd; font: .6rem/1.4 var(--font-mono); list-style: none; }
.preview-checks li { padding: .85rem 0; border-bottom: 1px solid #354a54; }
.preview-checks li::before { content: "+"; margin-right: .55rem; color: var(--signal); }
.production-example { padding: 1.5rem; }
.production-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; padding-top: .4rem; border-top: 1px solid #48606c; }
.production-dimension { color: #8fa4ae; font: .68rem/1.2 var(--font-mono); }
.grating-legend { display: flex; flex-wrap: wrap; gap: .5rem .9rem; color: #8fa4ae; font: .66rem/1.35 var(--font-mono); text-transform: uppercase; }
.grating-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.grating-legend i { width: 16px; height: 8px; display: inline-block; }
.grating-legend__load { background: repeating-linear-gradient(0deg, transparent 0 2px, #4f7487 2px 4px); }
.grating-legend__cross { background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(79,116,135,.55) 5px 6px); }
.production-svg { width: 100%; height: auto; display: block; background: #f8fafb; border: 2px solid #8aa0aa; }
.production-expand { width: 100%; position: relative; display: block; padding: 0; color: inherit; background: transparent; border: 0; cursor: zoom-in; }
.production-expand__label { min-height: 40px; display: inline-flex; align-items: center; gap: .45rem; position: absolute; right: .65rem; bottom: .65rem; padding: .4rem .75rem; color: #e6f1f5; background: rgba(13,20,24,.88); border: 1px solid #607782; font: .72rem/1 var(--font-mono); text-transform: uppercase; }
.production-expand__label svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.panel-lightbox { width: min(96vw,1600px); max-width: none; margin: auto; padding: 0; color: #dce7ec; background: var(--night-raised); border: 1px solid #607782; box-shadow: 0 30px 90px rgba(0,0,0,.58); }
.panel-lightbox::backdrop { background: rgba(6,10,12,.88); backdrop-filter: blur(3px); }
.panel-lightbox__header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.2rem; border-bottom: 1px solid #354a54; }
.panel-lightbox__header strong { display: block; color: var(--white); font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; }
.panel-lightbox__header span { display: block; margin-top: .3rem; color: #9aaeb8; font: .74rem/1.45 var(--font-mono); }
.panel-lightbox__close { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; color: #c6d6dd; background: transparent; border: 1px solid #4d626d; cursor: pointer; }
.panel-lightbox__close:hover { color: var(--white); border-color: #7c929d; }
.panel-lightbox__close svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.panel-lightbox__body { max-height: calc(100vh - 150px); overflow: auto; padding: clamp(1rem,3vw,2.5rem); background: #e9eff2; }
.panel-lightbox__body img { width: 100%; min-width: 900px; height: auto; display: block; }
.panel-lightbox__metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; border-top: 1px solid #354a54; }
.panel-lightbox__metrics div { min-width: 0; padding: .9rem 1.2rem; border-right: 1px solid #354a54; }
.panel-lightbox__metrics div:last-child { border: 0; }
.panel-lightbox__metrics dt { overflow-wrap: anywhere; color: #96abb5; font: .72rem/1.4 var(--font-mono); text-transform: uppercase; }
.panel-lightbox__metrics dd { margin: .4rem 0 0; color: #eef5f7; font-family: var(--font-display); font-size: 1.2rem; line-height: 1; }
.panel-lightbox > p { margin: 0; padding: .9rem 1.2rem; color: #9aaeb8; border-top: 1px solid #354a54; font-size: .8rem; line-height: 1.55; }
.production-facts { display: grid; grid-template-columns: repeat(3,1fr); margin: 1rem 0 0; padding: 0; border: 1px solid #354a54; list-style: none; }
.production-facts li { min-width: 0; padding: .8rem; border-right: 1px solid #354a54; }
.production-facts li:last-child { border: 0; }
.production-facts span { display: block; color: #8fa4ae; font: .7rem/1.35 var(--font-mono); text-transform: uppercase; }
.production-facts strong { display: block; margin-top: .45rem; color: #dbe8ed; font: .82rem/1.35 var(--font-mono); }
.panel-piece, .panel-offcut { min-width: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: .5rem; background-color: var(--steel); background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,.12) 9px 10px); }
.panel-piece--2, .panel-piece--4 { background-color: #1b5d8d; }
.panel-offcut { color: #312006; background-color: var(--amber); background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(64,37,3,.18) 7px 8px); }
.panel-piece b, .panel-offcut b { font: .74rem/1.15 var(--font-mono); text-transform: uppercase; }
.panel-piece small, .panel-offcut small { margin-top: .4rem; font: .66rem/1.2 var(--font-mono); white-space: nowrap; }
.panel-piece small { color: #b8d0dc; }
.result-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; border-top: 1px solid #3b515c; }
.result-metrics div { min-width: 0; padding: 1.1rem 1.2rem; border-right: 1px solid #3b515c; }
.result-metrics div:last-child { border: 0; }
.result-metrics dt { overflow-wrap: anywhere; color: #96abb5; font: .72rem/1.35 var(--font-mono); text-transform: uppercase; }
.result-metrics dd { margin: .45rem 0 0; color: #eef5f7; font-family: var(--font-display); font-size: 1.7rem; line-height: 1; }
.result-metrics div:last-child dd { color: #f1a747; }
.figure-note { margin: 0; padding: .9rem 1.2rem; color: #93a7b1; border-top: 1px solid #3b515c; font-size: .8rem; line-height: 1.55; }
.figure-note a { color: #75cfff; text-decoration: underline; text-underline-offset: 3px; }

.advantages { padding: clamp(5rem,8vw,8rem) max(5vw,1.25rem); background: var(--white); }
.advantages > header { display: grid; grid-template-columns: 1fr 1.35fr; gap: 2rem 5vw; margin-bottom: 4rem; }
.advantages .eyebrow { color: var(--steel); }
.advantages h2 { margin: 0; font-size: clamp(2.8rem,4.5vw,4.8rem); font-weight: 600; line-height: .96; text-transform: uppercase; }
.advantage-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.advantage-grid article { min-height: 390px; padding: 2rem 2rem 2rem 0; border-right: 1px solid var(--line); }
.advantage-grid article + article { padding-left: 2rem; }
.advantage-grid article:last-child { border-right: 0; }
.advantage-grid article > span { color: var(--steel); font: .74rem/1.35 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.advantage-grid h3 { margin: 4rem 0 1.5rem; font-size: 1.7rem; line-height: 1.05; text-transform: uppercase; }
.advantage-grid ul { margin: 0; padding: 0; color: var(--muted); font-size: .86rem; list-style: none; }
.advantage-grid li { padding: .55rem 0; border-top: 1px solid var(--line); }
.advantage-grid li::before { content: "+"; margin-right: .6rem; color: var(--electric); font-family: var(--font-mono); }
.section { padding: clamp(5rem, 9vw, 9rem) max(5vw, 1.25rem); }
.section--light { background: var(--paper); }
.section-heading { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1rem 5vw; margin-bottom: 4rem; }
.section-heading .eyebrow { grid-column: 1 / -1; margin-bottom: .5rem; color: var(--steel); }
.section-heading h2 { max-width: 780px; margin-bottom: 0; color: var(--graphite); font-size: clamp(3rem, 5vw, 5.2rem); font-weight: 600; line-height: .94; text-transform: uppercase; }
.section-heading > p:last-child { max-width: 620px; align-self: end; margin: 0; color: var(--muted); }


.section--output { background: var(--white); }
.output-grid { display: grid; grid-template-columns: repeat(2,1fr); border: 1px solid var(--line); }
.output-grid article { min-height: 230px; padding: 2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.output-grid article:nth-child(2n) { border-right: 0; }
.output-grid article:nth-child(n+3) { border-bottom: 0; }
.output-grid span { color: var(--steel); font: .74rem/1.35 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.output-grid strong { display: block; margin: 3rem 0 .6rem; font-family: var(--font-display); font-size: 1.8rem; line-height: 1; text-transform: uppercase; }
.output-grid p { max-width: 520px; margin: 0; color: var(--muted); font-size: .88rem; }
.section--output blockquote { max-width: 1100px; margin: 6rem 0 0; color: var(--steel); font-family: var(--font-display); font-size: clamp(2.6rem, 4.7vw, 5rem); font-weight: 600; line-height: .98; text-transform: uppercase; }
.final-cta { min-height: 560px; display: grid; place-items: center; align-content: center; padding: 5rem 1.25rem; text-align: center; color: var(--night); background: var(--signal); }
.final-cta .eyebrow { color: #245d4a; }
.final-cta h2 { max-width: 880px; margin-bottom: 2rem; font-size: clamp(3.2rem, 6vw, 6.2rem); font-weight: 600; line-height: .9; text-transform: uppercase; }
.final-cta > p:last-child { margin: 1.4rem 0 0; max-width: 46ch; color: #235a48; font-size: .95rem; line-height: 1.5; }
.site-footer { display: grid; grid-template-columns: 1.5fr repeat(3,1fr); gap: 3rem; padding: 4rem max(5vw,1.25rem); color: #9db1bb; background: var(--night); font-size: .87rem; line-height: 1.7; }
.footer-brand { color: var(--white); font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; }
.site-footer p { max-width: 300px; margin-top: 1rem; }
.site-footer nav { display: flex; flex-direction: column; gap: .6rem; }
.site-footer nav strong { margin-bottom: .6rem; color: #dce7ec; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.site-footer a:hover { color: #75cfff; }
.site-footer small { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid var(--night-line); font: .74rem/1.5 var(--font-mono); }
.not-found { min-height: 70vh; display: grid; align-content: center; justify-items: start; padding: 6rem max(8vw,1.25rem); color: #dce7ec; background: var(--night); }
.not-found h1 { max-width: 900px; }
.not-found > p:not(.system-label) { color: #96aab4; }
.contact-hero { min-height: 600px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 8vw; padding: clamp(5rem,9vw,9rem) max(5vw,1.25rem); color: #dce7ec; background: var(--night); }
.contact-intro h1 { max-width: 850px; }
.contact-intro > p:last-child { max-width: 650px; color: #99adb7; font-size: 1.05rem; }
.contact-details { margin: 0; border-top: 1px solid var(--night-line); }
.contact-details div { padding: 1.4rem 0; border-bottom: 1px solid var(--night-line); }
.contact-details dt { color: #8ba3ae; font: .74rem/1.35 var(--font-mono); text-transform: uppercase; }
.contact-details dd { margin: .55rem 0 0; color: #edf5f8; font-family: var(--font-display); font-size: 1.55rem; line-height: 1.2; }
.contact-details a { color: #75cfff; }
.contact-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; padding: clamp(5rem,9vw,9rem) max(5vw,1.25rem); background: var(--paper); }
.contact-promise h2 { max-width: 600px; margin-bottom: 1.2rem; font-size: clamp(2.8rem,4.8vw,5rem); font-weight: 600; line-height: .95; text-transform: uppercase; }
.contact-promise > p:last-child { max-width: 520px; color: var(--muted); }
.contact-form { padding: clamp(1.5rem,4vw,3rem); background: var(--white); border: 1px solid var(--line); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; margin-bottom: .5rem; color: var(--steel); font: 600 .8rem/1.4 var(--font-mono); text-transform: uppercase; }
.field label span { color: #6d818c; font-size: .7rem; font-weight: 400; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: .75rem; color: var(--graphite); background: var(--paper); border: 1px solid #b8c4cb; border-radius: 0; font: 1rem/1.5 var(--font-body); }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--electric); outline: 3px solid rgba(15,127,212,.16); outline-offset: 0; }
.sample-hero { min-height: 620px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 7vw; padding: clamp(5rem,9vw,9rem) max(5vw,1.25rem); color: #dce7ec; background: var(--night); }
.sample-hero > *, .sample-section__heading > *, .worked-panels > *, .sample-summary > *, .machine-facts > *, .waste-account > * { min-width: 0; }
.sample-hero > div > p:last-child { max-width: 720px; color: #9aadb7; }
.sample-summary { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); margin: 0; border: 1px solid var(--night-line); }
.sample-summary div { padding: 1.5rem; border-right: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); }
.sample-summary div:nth-child(2n) { border-right: 0; }
.sample-summary div:nth-child(n+3) { border-bottom: 0; }
.sample-summary dt, .machine-facts dt, .worked-panels dt, .waste-account dt { overflow-wrap: anywhere; color: #8ba3ae; font: .73rem/1.4 var(--font-mono); text-transform: uppercase; }
.sample-summary dd { margin: .6rem 0 0; color: var(--white); font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.sample-section { padding: clamp(5rem,9vw,9rem) max(5vw,1.25rem); background: var(--paper); }
.sample-section--dark { color: #dce7ec; background: var(--graphite); }
.sample-section__heading { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1rem 5vw; margin-bottom: 4rem; }
.sample-section__heading .eyebrow { grid-column: 1 / -1; color: var(--steel); }
.sample-section--dark .eyebrow { color: #8ba3ae; }
.sample-section__heading h2 { margin: 0; font-size: clamp(2.8rem,4.8vw,5rem); line-height: .95; text-transform: uppercase; }
.sample-section__heading > p:last-child { align-self: end; max-width: 620px; margin: 0; color: var(--muted); }
.sample-section--dark .sample-section__heading > p:last-child { color: #9badb5; }
.table-wrap { width: 100%; max-width: 100%; min-width: 0; contain: inline-size; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--line); }
table { width: 100%; min-width: 600px; border-collapse: collapse; background: var(--white); }
th, td { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--steel); background: #e9eef1; font: .76rem/1.35 var(--font-mono); letter-spacing: .03em; text-transform: uppercase; }
td { font-family: var(--font-mono); font-size: .84rem; line-height: 1.55; }
.machine-facts { display: grid; grid-template-columns: repeat(4,1fr); margin: 1rem 0 0; border: 1px solid var(--line); background: var(--white); }
.machine-facts div { padding: 1.2rem; border-right: 1px solid var(--line); }
.machine-facts div:last-child { border: 0; }
.machine-facts dd { margin: .5rem 0 0; font-family: var(--font-display); font-size: 1.35rem; }
.worked-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.worked-panels article { padding: 1.5rem; background: var(--night-raised); border: 1px solid #40535d; }
.worked-panel { height: 170px; display: flex; background: var(--amber); border: 2px solid #8398a2; }
.worked-panel span { width: var(--used); display: grid; place-items: center; color: var(--white); background-color: var(--steel); background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,.12) 9px 10px); font: .78rem/1.2 var(--font-mono); text-transform: uppercase; }
.worked-panels h3 { margin: 1.5rem 0 1rem; font-size: 1.5rem; text-transform: uppercase; }
.worked-panels dl { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; border-top: 1px solid #40535d; }
.worked-panels dl div { padding: 1rem .7rem 0 0; }
.worked-panels dd { margin: .45rem 0 0; font-family: var(--font-display); font-size: 1.2rem; }
.waste-account { display: grid; grid-template-columns: repeat(5,1fr); margin: 0; border: 1px solid var(--line); background: var(--white); }
.waste-account div { padding: 1.5rem; border-right: 1px solid var(--line); }
.waste-account div:last-child { border: 0; }
.waste-account dd { margin: 1.5rem 0 .4rem; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.waste-account span { color: var(--muted); font: .6rem/1 var(--font-mono); }
.sample-note { margin: 1rem 0 0; padding: 1rem 1.2rem; color: var(--muted); background: #e9eef1; font-size: .9rem; line-height: 1.55; }


/* Direction A — steel plate: stat strip + ruled feature list */
.made-for { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem 6vw; align-items: start; background: var(--paper); }
.made-for .eyebrow { color: var(--steel); }
.made-for h2 { margin: 1rem 0 1.2rem; color: var(--graphite); font-size: clamp(3rem, 5vw, 5.2rem); font-weight: 600; line-height: .94; text-transform: uppercase; }
.made-for__intro > p:last-child { max-width: 560px; margin: 0; color: var(--muted); font-size: 1.02rem; }
.feature-list { margin: 0; padding: 0; list-style: none; }
.feature-list li { display: grid; grid-template-columns: 64px 1fr; gap: 1.3rem; padding: 1.5rem 0; border-top: 2px solid var(--graphite); }
.feature-list li:last-child { border-bottom: 2px solid var(--graphite); }
.feature-list span { padding-top: .2rem; color: #94570f; font: 500 1.05rem/1.2 var(--font-mono); }
.feature-list h3 { margin: 0 0 .5rem; font-size: 1.65rem; line-height: 1; text-transform: uppercase; }
.feature-list p { margin: 0; color: var(--muted); font-size: .95rem; }
.advantage-grid article > span { color: #94570f; font-family: var(--font-mono); }
.advantage-grid li::before { color: var(--amber); }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 200px 1fr auto; gap: 1rem; }
  .site-nav { gap: .8rem; }
  .hero { grid-template-columns: 1fr; }
  .result-window { width: min(760px,100%); }
}

@media (max-width: 760px) {
  .site-header { min-height: 60px; grid-template-columns: 1fr auto; padding-block: .6rem; }
  .brand__wordmark { display: none; }
  .brand__gn { display: block; }
  .menu-button { display: flex; }
  .site-nav { display: none; grid-column: 1 / -1; flex-direction: column; gap: 0; padding-top: .8rem; }
  .site-nav.is-open { display: flex; }
  .site-nav a { min-height: 48px; display: flex; align-items: center; border-top: 1px solid var(--night-line); }
  .header-actions { display: none; }
  .hero { min-height: 0; padding: 4.5rem 1.2rem; }
  h1 { font-size: clamp(2.8rem,12vw,5rem); }
  .panel-stage { padding-inline: 1.2rem; }
  .dimension--width { left: 1.2rem; right: 1.2rem; }
  .sample-panel { min-height: 90px; }
  .panel-piece, .panel-offcut { padding: .25rem; }
  .panel-piece b, .panel-offcut b { font-size: .62rem; }
  .panel-piece small, .panel-offcut small { display: none; }
  .result-metrics div { padding: .9rem .65rem; }
  .result-metrics dd { font-size: 1.35rem; }
  .result-metrics, .panel-lightbox__metrics { grid-template-columns: 1fr 1fr; }
  .panel-lightbox__metrics div { border-bottom: 1px solid #354a54; }
  .result-preview { grid-template-columns: 1fr; padding: 1.2rem; }
  .preview-panel { min-height: 180px; }
  .production-example { padding: 1.2rem; }
  .production-heading { align-items: flex-start; flex-direction: column; }
  .production-expand__label { position: static; justify-content: center; margin-top: .5rem; }
  .panel-lightbox { width: 100vw; height: 100vh; max-height: none; border: 0; }
  .panel-lightbox__body { max-height: calc(100vh - 140px); padding: 1rem; }
  .panel-lightbox__body img { min-width: 900px; }
  .production-facts { grid-template-columns: 1fr; }
  .production-facts li { border-right: 0; border-bottom: 1px solid #354a54; }
  .section { padding: 5rem 1.2rem; }
  .section-heading { grid-template-columns: 1fr; }
  .section-heading .eyebrow { grid-column: auto; }
  .output-grid, .advantage-grid { grid-template-columns: 1fr; }
  .made-for { grid-template-columns: 1fr; }
  .feature-list li { grid-template-columns: 44px 1fr; }
  .advantages > header, .sample-hero, .sample-section__heading { grid-template-columns: 1fr; }
  .advantage-grid article, .advantage-grid article + article { min-height: 0; padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .advantage-grid h3 { margin-top: 2rem; }
  .output-grid article, .output-grid article:nth-child(2n), .output-grid article:nth-child(n+3) { border-right: 0; border-bottom: 1px solid var(--line); }
  .output-grid article:last-child { border-bottom: 0; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .site-footer > div { grid-column: 1 / -1; }
  .contact-hero, .contact-section { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .worked-panels { grid-template-columns: 1fr; }
  .machine-facts, .waste-account { grid-template-columns: 1fr 1fr; }
  .machine-facts div, .waste-account div { border-bottom: 1px solid var(--line); }
  .table-wrap { max-width: calc(100vw - 2.4rem); }
  .table-wrap table { min-width: 540px; }
  .table-wrap th, .table-wrap td { padding: .7rem .7rem; font-size: .78rem; }
}

@media (max-width: 430px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .button { width: 100%; }
  .trial-facts { flex-direction: column; }
  .trial-facts li + li::before { margin-right: .7rem; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer > div, .site-footer small { grid-column: auto; }
  .sample-summary, .machine-facts, .waste-account { grid-template-columns: 1fr; }
  .sample-summary div, .machine-facts div, .waste-account div { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}
/* Brand lockup — the grating mark sits beside the wordmark. The mark is pure
   geometry (a panel of load bars and cross bars on true anisotropic pitch), so
   unlike the wordmark it carries no font dependency and renders identically
   everywhere. Brand manual §01: the panel does not depict grating, so this
   supporting mark is what does that job. */
/* Brand assets are the outlined masters generated from the manual's §02
   construction. The header and footer are both Graphite, so §06 calls for the
   Reversed White wordmark; §03's 1U clear space (23.75px at 200px wide) is what
   sets the 120px header height. Below 760px a 180px wordmark is 65px tall and
   does not fit a compact bar, so the GN mark takes over at its own 40px floor
   — the hand-off §04's reduction ladder specifies. */
.brand { display: block; }
.brand__wordmark { width: 200px; height: auto; }
.brand__gn { display: none; width: 40px; height: 40px; }
.footer-brand img { width: 200px; height: auto; }

/* Interior pages: a shorter dark hero than the home page's, and a prose column
   for the legal documents. */
.page-hero { display: grid; align-content: center; justify-items: start; padding: clamp(4.5rem, 8vw, 7.5rem) max(5vw, 1.25rem); color: #dce7ec; background: var(--night); }
.page-hero h1 { max-width: 1000px; margin-bottom: 1.4rem; font-size: clamp(2.7rem, 5.2vw, 5.4rem); }
.page-hero > p:not(.system-label) { max-width: 720px; margin: 0; color: #9bafb9; font-size: 1.05rem; }
.page-hero .hero__actions { margin-top: 2.2rem; }
.page-hero .trial-facts { margin-top: 1.6rem; }

.prose { max-width: 760px; }
.prose h2 { margin: 3rem 0 1rem; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.02; text-transform: uppercase; }
.prose h3 { margin: 2.1rem 0 .6rem; font-size: 1.2rem; text-transform: uppercase; }
.prose p, .prose li { color: var(--muted); }
.prose > p:first-child { color: var(--graphite); font-size: 1.05rem; }
.prose ul { margin: 0 0 1.2rem; padding-left: 1.1rem; }
.prose li { margin-bottom: .5rem; }
.doc-meta { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin: 0 0 2.5rem; padding: 1rem 1.2rem; color: var(--muted); background: var(--white); border: 1px solid var(--line); font: .76rem/1.5 var(--font-mono); text-transform: uppercase; list-style: none; }
.doc-meta strong { color: var(--steel); }
.draft-notice { margin: 0 0 2rem; padding: 1rem 1.2rem; color: #6b4708; background: #fdf4e8; border-left: 3px solid var(--amber); font-size: .85rem; }

/* Two- and three-up card rows used by the product hub and the step pages. */
.card-row { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.card-row article { min-width: 0; padding: 2rem 2rem 2rem 0; border-right: 1px solid var(--line); }
.card-row article + article { padding-left: 2rem; }
.card-row article:last-child { border-right: 0; }
.card-row span { color: #94570f; font: .74rem/1.35 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.card-row h3 { margin: 2.5rem 0 .8rem; font-size: 1.6rem; line-height: 1.02; text-transform: uppercase; }
.card-row p { margin: 0 0 1.2rem; color: var(--muted); font-size: .9rem; }
.card-row a { color: var(--steel); font: .78rem/1 var(--font-mono); text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: .3rem; }
.card-row a:hover { color: var(--electric); }

.step-list { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step-list li { display: grid; grid-template-columns: 72px 1fr; gap: 1.5rem; padding: 2rem 0; border-top: 2px solid var(--graphite); counter-increment: step; }
.step-list li:last-child { border-bottom: 2px solid var(--graphite); }
.step-list li::before { content: counter(step, decimal-leading-zero); color: #94570f; font: 500 1.6rem/1 var(--font-mono); }
.step-list h3 { margin: 0 0 .6rem; font-size: 1.55rem; line-height: 1.05; text-transform: uppercase; }
.step-list p { margin: 0 0 .6rem; color: var(--muted); font-size: .93rem; }

.trial-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.trial-card article { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--white); border: 1px solid var(--line); }
.trial-card article:first-child { border-color: var(--steel); border-width: 2px; }
.trial-card h2 { margin: 1rem 0 .8rem; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; text-transform: uppercase; }
.trial-card > article > p { color: var(--muted); font-size: .92rem; }
.trial-card dl { display: grid; grid-template-columns: 1fr; margin: 1.5rem 0 0; border-top: 1px solid var(--line); }
.trial-card dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.trial-card dt { color: var(--muted); font-size: .82rem; }
.trial-card dd { margin: 0; font: .8rem/1.4 var(--font-mono); text-align: right; }
.trial-card .button { margin-top: 1.8rem; }

@media (max-width: 760px) {
  .card-row, .trial-card { grid-template-columns: 1fr; }
  .card-row article, .card-row article + article { padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .card-row article:last-child { border-bottom: 0; }
  .step-list li { grid-template-columns: 48px 1fr; gap: 1rem; }
  .page-hero { padding: 4rem 1.2rem; }
}

.actions--spaced { margin-top: 2.5rem; }