:root {
  --ink: #101f2c;
  --muted: #52606a;
  --night: #0d1c2a;
  --sand: #edbd75;
  --paper: #f7f7f2;
  --rule: #d0d6d4;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
*, *::before, *::after {box-sizing: border-box}
html {scroll-behavior: smooth; scroll-padding-top: 85px}
body, h1, h2, h3, p, figure, ol {margin: 0}
a {color: inherit; text-decoration: none}
button, input, textarea, select {font: inherit}
button, summary, select {cursor: pointer}
button {border: 0}
img {display: block; max-width: 100%}
[hidden] {display: none !important}
:focus-visible {outline: 3px solid #bb7a25; outline-offset: 4px}
.skip {position: fixed; top: -100px; left: 18px; background: white; padding: 12px; z-index: 20}
.skip:focus {top: 8px}
.wrap {width: min(1340px, calc(100% - clamp(40px, 9vw, 150px))); margin: 0 auto}
header {position: sticky; top: 0; background: var(--paper); z-index: 10; border-bottom: 1px solid var(--rule)}
.head, .head-actions, .brand, .head nav, .buttons, .hero-foot, .foot {display: flex; align-items: center}
.head {min-height: 76px; justify-content: space-between; gap: 20px}
.brand {gap: 8px; flex-shrink: 0}
.brand svg {color: #ad7331}
.brand b, .brand small {display: block}
.brand b {font-size: 26px; line-height: 1; letter-spacing: .055em}
.brand small {font: 8px var(--mono); margin-top: 4px; letter-spacing: .08em}
.head nav {gap: clamp(16px, 2.3vw, 40px)}
.head nav a, #mobile-menu a {font-size: 14px; font-weight: 600}
.head nav a:hover, .head nav a[aria-current] {color: #8c581d}
.head-actions {gap: 23px}
.header-cta {background: var(--ink); color: white; padding: 12px 16px; font-weight: 600; font-size: 13px}
.header-cta span {margin-left: 14px; color: var(--sand)}
#menu-btn {display: none; background: transparent; font-size: 22px; padding: 6px}
#mobile-menu {padding: 8px 5vw 15px; border-top: 1px solid var(--rule)}
#mobile-menu a {display: block; padding: 12px 0}
.hero {position: relative; isolation: isolate; color: white; background: #0b1e31}
.hero-bg, .hero::after {position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2}
.hero-bg {object-fit: cover; object-position: center 57%}
.hero::after {content: ""; z-index: -1; background: linear-gradient(90deg,rgba(5,18,31,.94) 0%,rgba(5,18,31,.79) 35%,rgba(5,18,31,.17) 75%),linear-gradient(0deg,rgba(4,14,26,.7),transparent 42%)}
.hero-inner {padding-top: clamp(58px,6.5vw,98px); padding-bottom: clamp(46px,5vw,84px)}
.location, .kicker, .mini, .hero-foot, .duty-label, .code, figcaption b, .industry-grid article>span, .process article>span {font: 600 11px/1.45 var(--mono); letter-spacing: .1em; text-transform: uppercase}
.location {display: flex; align-items: center; gap: 11px; color: #e5d9c9}
.location i {display: inline-block; height: 7px; width: 7px; background: var(--sand)}
h1, h2, h3 {font-weight: 560}
h1 {font-size: clamp(56px,6.25vw,100px); line-height: .98; letter-spacing: -.06em; margin: 26px 0}
h1 em, h2 em {font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic}
h1 em {color: var(--sand)}
.hero-inner>p {max-width: 570px; font-size: clamp(16px,1.28vw,20px); line-height: 1.55; color: #e8ebeb}
.buttons {margin-top: 29px; gap: 27px; flex-wrap: wrap}
.btn {display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; padding: 15px 21px; min-height: 48px; font-size: 14px; font-weight: 650; transition: background .18s}
.gold {color: #19202b; background: var(--sand)}
.gold:hover {background: #ffce82}
.hero-link, .inline-a, .item-cta {display: inline-flex; align-items: center; gap: 13px; border-bottom: 1px solid currentColor; padding: 5px 0; font-weight: 600; font-size: 14px}
.hero-foot {justify-content: space-between; padding: 16px 0; border-top: 1px solid #ffffff61; color: #e5e7e8; font-size: 10px}
.hero-foot b {color: var(--sand); padding: 0 5px}
section {padding: clamp(56px,6.2vw,100px) 0}
.kicker {display: flex; gap: 12px; align-items: center; color: #526270; margin-bottom: 26px}
.kicker span {color: #99611d}
.kicker i {display: block; width: 30px; height: 1px; background: currentColor; opacity: .6}
h2 {font-size: clamp(37px,4.2vw,70px); line-height: 1.04; letter-spacing: -.053em}
h2 em {color: #91612e}
.about-spread, .why-grid, .contact-grid, .catalog {display: grid; grid-template-columns: 1fr 1fr; gap: clamp(35px,7vw,120px)}
.prose, .why-lead, .industry-grid p, .process p, .contact-grid>div>p:not(.mini), .support {color: var(--muted); line-height: 1.6}
.prose p+p {margin-top: 12px}
.duty {display: grid; grid-template-columns: 1.1fr 1fr .85fr 1fr; gap: 21px; margin-top: 44px; padding: 26px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); align-items: center}
.duty-label {max-width: 170px; color: #596975}
.duty strong, .duty span {display: block}
.duty strong {font-size: clamp(30px,3.2vw,48px); letter-spacing: -.055em; font-weight: 550}
.duty small {font: 20px Georgia,serif; letter-spacing: -.02em}
.duty span {font-size: 13px; margin-top: 5px; color: var(--muted)}
.products {background: white}
.section-intro {display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 38px}
.section-intro p {max-width: 340px; line-height: 1.55; color: var(--muted)}
.catalog {grid-template-columns: 1fr 1.05fr; align-items: start; gap: clamp(28px,4vw,68px)}
.catalog-list {border-top: 1px solid var(--rule)}
.line {border-bottom: 1px solid var(--rule)}
summary {list-style: none}
summary::-webkit-details-marker {display: none}
.line summary {display: grid; grid-template-columns: 28px 1fr 16px; align-items: center; gap: 14px; padding: 21px 0; font-size: clamp(19px,1.65vw,25px); font-weight: 570; letter-spacing: -.035em}
.code {color: #90622a; font-size: 10px; letter-spacing: .04em}
.line i {height: 14px; position: relative}
.line i::before,.line i::after {content: ""; position: absolute; width: 12px; height: 1.5px; top: 7px; left: 1px; background: currentColor}
.line:not([open]) i::after {transform: rotate(90deg)}
.line[open] summary {color: #875818}
.line-body {padding: 0 15px 20px 42px; font-size: 15px; line-height: 1.55}
.line-body p+p {margin-top: 10px}
.item-cta {font-size: 13px; margin-top: 12px}
.product-figure {background: #e9edec; overflow: hidden}
.product-figure img {width: 100%; aspect-ratio: 1.46; object-fit: cover}
figcaption {display: flex; gap: 19px; padding: 17px 21px; background: var(--ink); color: white; align-items: center; font-size: 14px}
figcaption b {color: var(--sand); white-space: nowrap; font-size: 10px}
.supply {margin-top: 33px; padding-top: 25px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 180px 1fr; gap: 8px 20px}
.supply b {font: 600 11px/1.7 var(--mono); text-transform: uppercase; letter-spacing: .06em}
.supply p {font-size: 17px; line-height: 1.45; font-weight: 550}
.supply small {grid-column: 2; line-height: 1.55; color: var(--muted)}
.industries {background: var(--night); color: #f7f7f2}
.industries .kicker,.contact .kicker {color: #bbcad2}
.industries .kicker span,.contact .kicker span {color: var(--sand)}
.industry-grid,.process {display: grid; grid-template-columns: repeat(4,1fr); gap: 25px; margin-top: 40px}
.industry-grid article, .process article {border-top: 1px solid #788189; padding: 20px 4px 0 0}
.industry-grid article>span {color: var(--sand); font-size: 10px}
h3 {font-size: clamp(21px,2vw,28px); line-height: 1.15; letter-spacing: -.03em}
.industry-grid h3,.process h3 {margin: 20px 0 10px}
.industry-grid p {color: #c6d0d5}
.why-lead {margin: 20px 0 12px; max-width: 570px}
.eng-note {background: #ebece4; border-top: 3px solid #b4874d; padding: clamp(22px,3vw,42px)}
.eng-note .mini {color: #72501e; margin-bottom: 17px}
.eng-note ol {padding-left: 23px}
.eng-note li {padding-left: 10px; margin-bottom: 13px; line-height: 1.52}
.eng-note li::marker {color: #85602d; font: 13px var(--mono)}
.process {margin-top: 45px}
.process article {border-color: var(--rule)}
.process article>span {color: #936729}
.process h3 {font-size: 22px}
.process p {font-size: 15px}
.contact {background: #17303d; color: white}
.contact h2 em {color: var(--sand)}
.contact-grid {align-items: start}
.contact-grid>div>p:not(.mini) {max-width: 500px; color: #d5dee0; margin: 22px 0}
.contact-grid>div>.mini {color: var(--sand); margin: 34px 0 8px}
.phone {font-size: clamp(23px,2.4vw,38px); font-weight: 550; letter-spacing: -.035em; white-space: nowrap}
address {font-style: normal; font-size: 14px; line-height: 1.65; color: #cbd6da; margin-top: 18px}
#rfq {background: #f7f7f2; color: var(--ink); padding: clamp(22px,3vw,40px)}
.form-title {margin-bottom: 22px}
.form-title .mini {color: #85602d}
.form-title h3 {margin-top: 10px}
#rfq label {display: block; font-size: 13px; font-weight: 650; margin: 16px 0 7px}
#rfq select,#rfq textarea {width: 100%; max-width: 100%; padding: 12px; border: 1px solid #adb7b9; background: white; color: var(--ink); border-radius: 0; font-size: 15px; line-height: 1.45}
#rfq textarea {resize: vertical}
#rfq .btn {margin: 14px 0 10px}
#rfq small, #rfq output {display: block; line-height: 1.5; color: var(--muted); font-size: 12px}
#rfq output:not(:empty) {margin-top: 8px; font-weight: bold}
footer {background: #0d1c26; color: white}
.foot {justify-content: space-between; gap: 22px; padding: 25px 0}
.foot p,.foot>a:last-child {font-size: 11px; color: #ced8dc}
@media(max-width:980px) {
  .head nav {display: none} #menu-btn {display: block}
  .industry-grid,.process {grid-template-columns: repeat(2,1fr)}
  .catalog,.about-spread,.contact-grid,.why-grid {gap: 27px}
}
@media(max-width:740px) {
  html {scroll-padding-top: 70px}
  .head {min-height: 62px; gap: 12px}
  .head-actions {gap: 10px}
  .brand b {font-size: 22px} .brand svg {width: 28px}
  .brand small {font-size: 6.9px}
  .header-cta {display: none}
  h1 {font-size: clamp(42px,8.7vw,62px)}
  .hero-bg {object-position: 62% center}
  .hero::after {background: linear-gradient(90deg,rgba(5,18,31,.92) 0%,rgba(5,18,31,.76) 58%,rgba(5,18,31,.4)),linear-gradient(0deg,rgba(5,18,31,.6),transparent 50%)}
  .hero-inner {padding-top: 48px; padding-bottom: 40px}
  .location {font-size: 9px; letter-spacing: .065em}
  .hero-inner>p {font-size: 16px}
  .buttons {gap: 15px; margin-top: 22px}
  .hero-foot {font-size: 8px; letter-spacing: .035em; gap: 14px}
  .about-spread,.why-grid,.contact-grid,.catalog {grid-template-columns: 1fr}
  .kicker {margin-bottom: 19px}
  .duty {grid-template-columns: repeat(3,1fr); gap: 11px; margin-top: 25px; padding: 18px 0}
  .duty-label {grid-column: 1/-1; max-width: none}
  .duty strong {font-size: clamp(26px,7vw,38px)} .duty small {font-size: 15px} .duty span {font-size: 11px}
  .section-intro {display: block; margin-bottom: 25px}
  .section-intro p {margin-top: 15px; max-width: none}
  .line-body {padding-left: 0}
  .product-figure img {aspect-ratio: 1.8}
  .supply {display: block}
  .supply p {margin: 9px 0}
  .industry-grid,.process {gap: 22px 16px}
  .industry-grid h3,.process h3 {margin: 13px 0 7px;font-size: 20px}
  .industry-grid p,.process p {font-size: 14px}
  .foot {flex-wrap: wrap; gap: 18px}
  .foot p {order: 3; width: 100%}
}
@media(max-width:380px) {
  .wrap {width: calc(100% - 30px)}
  .industry-grid,.process {grid-template-columns: 1fr}
  .btn {padding: 12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
.supply .scope-lines {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.scope-lines h3 {font-size:16px;line-height:1.25;margin-bottom:6px}
.scope-lines small {display:block}
@media(max-width:980px){.supply{grid-template-columns:1fr}.supply .scope-lines{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:740px){.scope-lines{margin-top:14px}}