:root {
	--navy: #1e2a3a;
	--brass: #b08d57;
	--sand: #f6f2ec;
	--line: #e4ddd2;
	--ink: #1f2328;
	--muted: #5f6672;
	--radius: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font: 17px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
h1, h2, h3 { font-family: "Questrial", "Inter", sans-serif; font-weight: 400; line-height: 1.15; color: var(--navy); }
h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 12px; }
h3 { font-size: 20px; margin: 0 0 6px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 820px; }
.center { text-align: center; }
.sub { color: var(--muted); max-width: 680px; margin: 0 0 28px; font-size: 18px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* Buttons */
.btn { display: inline-block; padding: 14px 26px; border-radius: 999px; background: var(--navy); color: #fff; border: 2px solid var(--navy); text-decoration: none; font-weight: 600; line-height: 1.2; transition: transform .15s, background .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--navy); }
.btn-sm { padding: 9px 18px; font-size: 15px; }
.btn-light { background: #fff; color: var(--navy); border-color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; }
.center-ctas { justify-content: center; }

/* Header */
.top { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); margin-right: auto; }
.brand svg { width: 32px; height: 32px; }
.brand span { font-family: "Questrial", sans-serif; font-size: 22px; line-height: 1; display: flex; flex-direction: column; }
.brand small { font-family: "Inter", sans-serif; font-size: 11px; color: var(--muted); letter-spacing: .04em; margin-top: 3px; }
.top nav { display: flex; gap: 22px; }
.top nav a { text-decoration: none; color: var(--ink); font-size: 15px; }
.top nav a:hover { color: var(--brass); }

/* Hero */
.hero { background: linear-gradient(180deg, var(--sand), #fff); padding: 56px 0 40px; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: var(--brass); font-weight: 600; margin: 0 0 12px; }
.hero h1 { font-size: clamp(36px, 5vw, 58px); margin: 0 0 18px; }
.lead { font-size: 20px; color: #3b4250; margin: 0 0 26px; max-width: 600px; }
.call { color: var(--muted); margin: 0; }
.hero-img { margin: 0; position: relative; }
.hero-img img { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; box-shadow: 0 24px 60px rgba(30,42,58,.18); }
.hero-img figcaption { position: absolute; left: 14px; bottom: 14px; background: rgba(255,255,255,.92); padding: 6px 12px; border-radius: 999px; font-size: 13px; }

/* Facts */
.facts { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 auto; padding-top: 28px; padding-bottom: 28px; }
.facts li { text-align: center; display: flex; flex-direction: column; }
.facts strong { font-family: "Questrial", sans-serif; font-weight: 400; font-size: 26px; color: var(--navy); }
.facts span { color: var(--muted); font-size: 15px; }

.band { background: var(--navy); color: #fff; padding: 34px 0; }
.trust { margin: 0; font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.9); }
.trust strong { color: #fff; font-weight: 600; }

/* Sections */
.section { padding: 80px 0; }
.alt { background: var(--sand); }
.cards { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cards li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; border-top: 3px solid var(--brass); }
.cards p { margin: 0; color: #3b4250; }

.ba { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ba figure { margin: 0; position: relative; }
.ba img { border-radius: 10px; aspect-ratio: 3 / 4.4; object-fit: cover; width: 100%; }
.ba figcaption { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; padding: 3px 10px; border-radius: 999px; }

.match-section { background: linear-gradient(180deg, #fff, var(--sand)); }
.match-section .nasr-form { box-shadow: 0 18px 50px rgba(30,42,58,.10); }
.match-section .nasr-title { color: var(--navy); font-size: 34px; }
.match-section .nasr-submit { background: var(--navy) !important; }
.alt-path { margin-top: 18px; color: var(--muted); }

.shapes { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.shapes li { background: #fff; border-radius: 12px; padding: 16px; text-align: center; }
.shapes img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.shapes span { display: block; margin-top: 8px; font-weight: 600; font-size: 15px; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; }
.washers { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.washers li { background: #fff; border-radius: 10px; padding: 10px; text-align: center; font-size: 13px; }
.washers img { width: 100%; aspect-ratio: 1; object-fit: contain; }

.mats { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.mats li { text-align: center; font-size: 13px; line-height: 1.3; }
.mats img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12); margin-bottom: 8px; }
.mats em { display: block; font-style: normal; color: var(--brass); font-size: 12px; }
.finishes { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.finishes li { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.finishes img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.finishes h3, .finishes p { padding: 0 18px; }
.finishes h3 { margin-top: 14px; }
.finishes p { color: #3b4250; margin: 0 0 18px; }

.steps { list-style: none; counter-reset: s; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.steps li { counter-increment: s; position: relative; padding-top: 52px; }
.steps li::before { content: counter(s); position: absolute; top: 0; left: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.steps p { margin: 0; color: #3b4250; }

.factory img { border-radius: var(--radius); }
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; padding: 16px 32px 16px 0; font-weight: 600; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 22px; font-weight: 400; color: var(--brass); }
details[open] summary::after { content: "–"; }
details p { margin: 0 0 16px; color: #3b4250; }

.cta-band { background: var(--navy); color: #fff; padding: 64px 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); margin: 0 0 24px; font-size: 18px; }

.foot { background: #141c27; color: rgba(255,255,255,.8); padding: 40px 0 20px; font-size: 15px; }
.foot a { color: #fff; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.copy { margin-top: 24px; font-size: 13px; color: rgba(255,255,255,.5); }

@media (max-width: 960px) {
	.top nav { display: none; }
	.hero-in, .split { grid-template-columns: minmax(0, 1fr); }
	.hero-img { max-width: 420px; }
	.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ba, .shapes, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	body { font-size: 16px; }
	.wrap { padding: 0 16px; }
	.section { padding: 56px 0; }
	.hero { padding: 36px 0 24px; }
	.lead { font-size: 18px; }
	.ctas .btn { flex: 1 1 100%; text-align: center; }
	.cards, .finishes { grid-template-columns: minmax(0, 1fr); }
	.washers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.brand small { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* Landing pages */
.crumbs { font-size: 14px; color: var(--muted); padding-top: 14px; padding-bottom: 0; }
.crumbs a { color: var(--muted); }
.crumbs + .hero { padding-top: 32px; }
.hero-product img { aspect-ratio: 1; object-fit: contain; background: #fff; padding: 24px; }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gallery li { background: #fff; border-radius: 12px; padding: 14px; text-align: center; font-size: 14px; font-weight: 600; color: var(--navy); }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: 8px; }
.cards.links li { padding: 0; }
.cards.links a { display: block; padding: 24px; text-decoration: none; color: inherit; height: 100%; }
.cards.links a:hover h3 { color: var(--brass); }
.who .cards li { padding: 0; }
.spec-promo .spec-thumb img { border-radius: 8px; box-shadow: 0 18px 50px rgba(30,42,58,.16); max-width: 380px; margin: 0 auto; }

/* Spec sheet */
.spec h2 { font-size: 26px; margin: 40px 0 12px; }
.spec table { width: 100%; border-collapse: collapse; font-size: 16px; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.spec th[scope=row] { width: 26%; color: var(--navy); font-weight: 600; }
.spec ol, .spec ul { padding-left: 22px; }
.spec li { margin-bottom: 6px; }
.spec-scroll { overflow-x: auto; }
.spec-blank { min-width: 720px; font-size: 14px !important; }
.spec-blank th { background: var(--sand); font-size: 13px; }
.spec-blank td, .spec-blank th { border: 1px solid var(--line); padding: 8px; }
.spec-blank tbody tr:first-child td { color: var(--muted); font-style: italic; }
.spec-note { color: var(--muted); margin-top: 0; }
.spec-contact { margin-top: 28px; padding-top: 16px; border-top: 2px solid var(--navy); font-size: 15px; }

@media (max-width: 960px) {
	.gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.foot nav { flex-direction: column; gap: 6px; }

/* Main menu: "Who we serve" dropdown, mobile panel */
.top .menu { display: flex; align-items: center; gap: 22px; }
.top .menu a[aria-current="page"] { color: var(--brass); }
.dd { position: relative; }
.dd-btn { font: inherit; font-size: 15px; color: var(--ink); background: none; border: 0; padding: 8px 0; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.dd-btn::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.dd.open .dd-btn::after { transform: translateY(1px) rotate(-135deg); }
.dd-btn:hover { color: var(--brass); }
.dd-list { list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 10px); left: -16px; min-width: 290px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px rgba(30,42,58,.14); display: none; }
.dd.open .dd-list, .dd:focus-within .dd-list { display: block; }
@media (hover: hover) and (min-width: 961px) { .dd:hover .dd-list { display: block; } .dd::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } }
.dd-list a { display: block; padding: 9px 12px; border-radius: 8px; }
.dd-list a:hover { background: var(--sand); color: var(--navy); }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.menu-btn span { width: 18px; height: 2px; background: var(--navy); border-radius: 2px; }
@media (max-width: 960px) {
	.top-in { gap: 10px; }
	.menu-btn { display: flex; }
	.top .menu { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(30,42,58,.12); padding: 8px 16px 16px; max-height: calc(100vh - 68px); overflow-y: auto; }
	.top .menu.open { display: flex; }
	.top .menu > a, .dd-btn { padding: 13px 4px; font-size: 17px; border-bottom: 1px solid var(--line); width: 100%; }
	.dd-btn { display: none; }
	.dd-list { display: block; position: static; box-shadow: none; border: 0; padding: 4px 0; min-width: 0; }
	.top .dd-list a { padding: 13px 4px; font-size: 17px; border-bottom: 1px solid var(--line); border-radius: 0; }
}
@media (max-width: 400px) { .top .btn-sm { padding: 9px 14px; } }