:root {
  --steel: #14476f;
  --electric: #0f7fd4;
  --graphite: #1b252c;
  --zinc: #aebcc6;
  --amber: #e08a22;
  --paper: #f6f7f9;
  --white: #fff;
  --line: #d7e0e6;
  --muted: #61727c;
  --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; }
/* 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; }
.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: #1f5845; }
.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) clamp(3.5rem, 5vw, 5rem); 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: #5b6c76; 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; }
.form-status { margin: 1rem 0 0; color: var(--muted); font-size: .9rem; }
.form-status:empty { display: none; }
.form-status a { color: var(--steel); border-bottom: 1px solid currentColor; }
.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: #5b6c76; 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. */

/* 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) clamp(3.5rem, 5vw, 5rem); 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; }

/* Breadcrumb trail. Sits on the dark page hero that opens every interior page,
   so it is styled against that ground. */
.breadcrumb { padding: 1.4rem max(5vw, 1.25rem) 0; color: #8ba3ae; background: var(--night); font: .76rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .03em; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "/"; margin-right: .6rem; color: #526b78; }
.breadcrumb a { color: #8ba3ae; border-bottom: 1px solid transparent; }
.breadcrumb a:hover { color: #75cfff; border-bottom-color: currentColor; }
.breadcrumb [aria-current] { color: #dce7ec; }
.breadcrumb + .page-hero, .breadcrumb + .contact-hero { padding-top: clamp(2rem, 4vw, 3.5rem); }

/* The hero hands off to the first body section. Left alone, the hero's bottom
   padding and the section's top padding stack into ~260px of nothing at desktop
   width, so on a 1080px screen the section shows only its eyebrow above the
   fold and the page looks unfinished. Trim both sides of the seam so the first
   heading is in view. */
.page-hero + .section, .contact-hero + .contact-section { padding-top: clamp(3.5rem, 5vw, 5rem); }

/* The eyebrow ink is tuned for the dark heroes; on light grounds it must swap
   to Steel or it fails AA badly (2.6:1 on white). */
.section--light .eyebrow, .section--output .eyebrow, .trial-card .eyebrow, .prose .eyebrow,
.contact-promise .eyebrow, .sample-section .eyebrow { color: var(--steel); }

/* Savings — the two headline figures, shown as a band on the home page and
   again at the top of /savings. The rupee figure takes the display face at
   hero scale because it is the reason the page gets read; the amber line under
   it carries the dollar conversion and the period, which are the two things
   that turn an impressive number into a checkable one. Amber is the AA-safe
   #94570f already used for the ruled-list numerals, not the brand --amber,
   which fails on paper. */
.savings-figures { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); background: var(--white); }
.savings-figures article { min-width: 0; padding: clamp(1.8rem, 3.4vw, 2.8rem); border-right: 1px solid var(--line); }
.savings-figures article:last-child { border-right: 0; }
.savings-figures > article > span { color: var(--steel); font: .74rem/1.35 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.savings-figures strong { display: block; margin: 2.6rem 0 .5rem; color: var(--graphite); font-family: var(--font-display); font-size: clamp(2.6rem, 4.6vw, 4.2rem); font-weight: 600; line-height: .92; text-transform: uppercase; }
.savings-figures em { display: block; margin-bottom: 1.3rem; color: #94570f; font-family: var(--font-display); font-size: 1.15rem; font-style: italic; }
.savings-figures p { max-width: 48ch; margin: 0; color: var(--muted); font-size: .92rem; }

/* The "go deeper" affordance from the card rows, lifted out so a band that is
   not a card row can carry it too. */
.deep-link { display: inline-block; margin-top: 1.5rem; padding-bottom: .3rem; color: var(--steel); font: .78rem/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid currentColor; }
.deep-link:hover { color: var(--electric); }

/* The measured base, on the dark ground: six counts that came out of a
   production database rather than a model. Three up, so the second row is the
   three that qualify the first three. */
.savings-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--night-line); }
.savings-facts > * { min-width: 0; }
.savings-facts div { padding: 1.5rem; border-right: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); }
.savings-facts div:nth-child(3n) { border-right: 0; }
.savings-facts div:nth-child(n+4) { border-bottom: 0; }
.savings-facts dt { overflow-wrap: anywhere; color: #8ba3ae; font: .73rem/1.4 var(--font-mono); text-transform: uppercase; }
.savings-facts dd { margin: .6rem 0 0; color: var(--white); font-family: var(--font-display); font-size: 1.9rem; line-height: 1; }

/* Currency pairs read as one figure, so the dollar half is tied to the rupee
   half rather than sitting as a second column. */
.money-alt { color: var(--muted); font-size: .92em; }
td .money-alt { color: #7d8d96; }

@media (max-width: 760px) {
  .savings-figures { grid-template-columns: 1fr; }
  .savings-figures article, .savings-figures article:last-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .savings-figures article:last-child { border-bottom: 0; }
  .savings-facts { grid-template-columns: 1fr; }
  .savings-facts div, .savings-facts div:nth-child(3n), .savings-facts div:nth-child(n+4) { border-right: 0; border-bottom: 1px solid var(--night-line); }
  .savings-facts div:last-child { border-bottom: 0; }
}

/* The note chip is a light box by default. On the graphite ground it has to
   invert or it reads as a stray panel rather than a footnote. */
.sample-section--dark .sample-note { color: #9badb5; background: #24313a; border: 1px solid var(--night-line); }

/* The light-ground eyebrow block above lists `.sample-section .eyebrow`, which
   matches the dark variant too and — being later in the file at equal
   specificity — beat the #8ba3ae set back at the dark rule. Steel on graphite
   is 1.6:1, so the eyebrow was all but invisible. Restated here, after the
   block that overrode it. */
.sample-section--dark .eyebrow { color: #8ba3ae; }

/* The closing line under a final call to action had never carried a link
   before, and `a { color: inherit }` left the two on /savings reading as plain
   text. Underlined rather than recoloured: on the Signal ground there is no
   second ink that holds AA. */
.final-cta > p:last-child a { border-bottom: 1px solid rgba(13, 20, 24, .45); }
.final-cta > p:last-child a:hover { border-bottom-color: currentColor; }

/* The two figures rarely carry the same amount of copy, and a "go deeper" link
   that floats to wherever the paragraph happens to end reads as a misalignment
   rather than a choice. Pushed to the foot of each card instead. The link is
   inline-block, so it needs align-self or the flex column stretches its
   underline across the full card width. */
.savings-figures article { display: flex; flex-direction: column; }
.savings-figures .deep-link { margin-top: auto; padding-top: 1.6rem; align-self: flex-start; }