:root { --navy: #041427; --ink: #061b32; --orange: #ff6500; --text: #f2f3f5; --muted: #c5cad2; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--navy); color: var(--text); font-family: Arial, Helvetica, sans-serif; }
.page-header { position: relative; width: 100%; max-width: 1024px; height: clamp(135px, 15.8vw, 162px); margin: 0 auto; background: #020d1d url("da-truss-design.png") top center / 100% auto no-repeat; }
.header-shine { position: absolute; top: 7%; left: 2.5%; width: 20.5%; height: 88%; overflow: hidden; pointer-events: none; }
.header-shine::after { position: absolute; inset: -30% -100%; content: ""; background: linear-gradient(112deg, transparent 43%, rgba(255,255,255,.08) 47%, rgba(255,255,255,.88) 50%, rgba(255,170,102,.35) 53%, transparent 57%); mix-blend-mode: screen; transform: translateX(-70%); animation: header-logo-shine 5.5s ease-in-out infinite; }
@keyframes header-logo-shine { 0%, 62% { transform: translateX(-70%); } 86%, 100% { transform: translateX(70%); } }
.header-hit { position: absolute; display: block; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.header-hit:focus-visible, .button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.home { left: 30.7%; top: 24%; width: 5.5%; height: 28%; }
.about { left: 38.3%; top: 24%; width: 6.4%; height: 28%; }
.services { left: 47%; top: 24%; width: 6.4%; height: 28%; }
.why { left: 55.1%; top: 24%; width: 9.6%; height: 28%; }
.projects { left: 66.7%; top: 24%; width: 6.3%; height: 28%; }
.contact { left: 74.5%; top: 24%; width: 6.5%; height: 28%; }
.quote { left: 82%; top: 17%; width: 16%; height: 34%; }
.content { max-width: 1024px; min-height: 720px; margin: 0 auto; padding: clamp(48px, 8vw, 92px) clamp(24px, 7vw, 78px); border-top: 1px solid rgba(255,255,255,.15); background: radial-gradient(circle at 80% 0%, #0b2b4b 0, transparent 38%), linear-gradient(130deg, #061a31, #020d1d 68%); }
.eyebrow { margin: 0 0 12px; color: var(--orange); font-family: "Arial Narrow", Arial, sans-serif; font-size: clamp(15px, 2vw, 22px); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
h1 { max-width: 780px; margin: 0; font-family: Impact, "Arial Narrow", sans-serif; font-size: clamp(42px, 7vw, 76px); font-weight: 400; letter-spacing: .015em; line-height: .98; text-transform: uppercase; }
h1 span { color: var(--orange); }
.intro { max-width: 760px; margin: 30px 0 0; color: var(--muted); font-size: clamp(17px, 2vw, 21px); line-height: 1.65; }
.rule { width: 96px; height: 3px; margin: 28px 0 40px; background: var(--orange); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.card { min-height: 205px; padding: 28px; border: 1px solid rgba(231,237,244,.32); background: rgba(3, 15, 29, .72); }
.card-number { display: block; margin-bottom: 15px; color: var(--orange); font-family: Impact, "Arial Narrow", sans-serif; font-size: 32px; font-weight: 400; }
.card h2 { margin: 0 0 10px; font-family: "Arial Narrow", Arial, sans-serif; font-size: 22px; text-transform: uppercase; }
.card p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; margin-top: 56px; padding: 28px; border-left: 3px solid var(--orange); background: rgba(0,0,0,.2); }
.callout p { margin: 0; font-size: clamp(18px, 2.3vw, 25px); line-height: 1.35; }
.button { display: inline-block; padding: 15px 24px; border: 1px solid var(--orange); background: var(--orange); color: #fff; font-family: "Arial Narrow", Arial, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: .02em; text-decoration: none; text-transform: uppercase; }
.page-footer { max-width: 1024px; margin: 0 auto; padding: 38px clamp(24px, 7vw, 78px); border-top: 1px solid rgba(255,255,255,.18); background: #020d1d; color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; }
.page-footer strong { color: var(--text); }
.page-footer p { margin: 7px 0; line-height: 1.5; }
.page-footer a { color: var(--text); text-decoration: none; }
.page-footer a:hover { color: var(--orange); }
@media (max-width: 600px) { .page-header { height: 96px; } .cards { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .card { min-height: auto; } }
@media (prefers-reduced-motion: reduce) { .header-shine::after { animation: none; } }