:root {
  --ink: #161815;
  --paper: #f3f1ea;
  --lime: #c9ff23;
  --muted: #686a63;
  --line: #d7d5cd;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
img { display: block; width: 100%; }

.nav {
  height: 84px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.2); color: white; position: absolute; z-index: 10; width: 100%;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brandMark { font: 900 28px/1 Arial; letter-spacing: -2px; position: relative; }
.brandMark:after { content: ""; display: block; height: 4px; width: 100%; background: var(--lime); margin-top: 4px; transform: skewX(-25deg); }
.brandText { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; max-width: 74px; line-height: 1.3; }
.nav nav { display: flex; gap: 38px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.nav nav a:hover { color: var(--lime); }
.navCta { border: 1px solid rgba(255,255,255,.45); padding: 12px 17px; font-size: 12px; letter-spacing: .05em; }
.navCta span { color: var(--lime); margin-left: 14px; }

.hero { min-height: 800px; background: #1a1d19; color: white; display: grid; grid-template-columns: 54% 46%; position: relative; overflow: hidden; }
.heroCopy { padding: 168px 7vw 150px; position: relative; z-index: 2; background: linear-gradient(115deg,#1a1d19 80%, transparent 80%); }
.eyebrow, .sectionLabel { font-size: 11px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.eyebrow { color: #c8cbc1; }
.eyebrow span { width: 28px; height: 2px; background: var(--lime); }
h1 { font-size: clamp(54px, 6vw, 96px); letter-spacing: -.06em; line-height: .91; margin: 40px 0 34px; max-width: 790px; }
h1 em, .comparison h2 em { color: var(--lime); font-style: normal; }
.heroLead { color: #b8bbb2; max-width: 570px; font-size: 18px; line-height: 1.65; }
.heroActions { display: flex; align-items: center; gap: 34px; margin-top: 40px; }
.button { border: 0; cursor: pointer; display: inline-flex; justify-content: space-between; gap: 30px; align-items: center; padding: 18px 22px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.button.primary { color: #161815; background: var(--lime); }
.button:hover { filter: brightness(.92); }
.textLink { font-size: 12px; padding-bottom: 5px; border-bottom: 1px solid #696c64; }
.textLink span { margin-left: 12px; color: var(--lime); }
.heroVisual { position: relative; min-width: 0; }
.heroVisual:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(26,29,25,.35),transparent 30%), linear-gradient(0deg,rgba(0,0,0,.3),transparent 50%); }
.heroVisual img { height: 100%; object-fit: cover; }
.imageBadge { position: absolute; z-index: 3; bottom: 95px; left: 45px; background: rgba(20,22,19,.88); backdrop-filter: blur(8px); padding: 18px 24px; border-left: 3px solid var(--lime); }
.imageBadge strong,.imageBadge span { display: block; }
.imageBadge strong { font-size: 14px; }
.imageBadge span { color: #b6b9b0; font-size: 11px; margin-top: 5px; }
.verticalLabel { position: absolute; z-index: 3; top: 130px; right: 26px; writing-mode: vertical-rl; font-size: 9px; letter-spacing: .2em; color: rgba(255,255,255,.65); }
.heroFacts { position: absolute; z-index: 4; left: 7vw; bottom: 0; display: flex; background: #242720; }
.heroFacts div { padding: 22px 32px; border-right: 1px solid #3a3d35; min-width: 170px; }
.heroFacts strong,.heroFacts span { display:block; }
.heroFacts strong { color: var(--lime); font-size: 22px; }
.heroFacts span { color: #a9aca3; font-size: 9px; text-transform: uppercase; letter-spacing:.12em; margin-top: 5px; }

.intro { padding: 120px 7vw 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; }
.sectionLabel { color: #777970; margin: 0 0 26px; }
.sectionLabel:before { content:""; width: 28px; height: 2px; background: var(--lime); }
h2 { font-size: clamp(42px,5vw,72px); line-height: .98; letter-spacing: -.055em; margin:0; }
.introText { padding-top: 43px; max-width: 600px; }
.introText p { font-size: 19px; line-height: 1.65; margin: 0 0 38px; }
.introText span { border-top: 1px solid var(--line); padding-top: 18px; display:block; color: var(--muted); font-size: 11px; letter-spacing:.12em; text-transform:uppercase; }

.serviceGrid { display:grid; grid-template-columns: repeat(3,1fr); padding: 0 7vw 120px; }
.serviceCard { min-height: 360px; border:1px solid var(--line); padding: 30px; margin-right:-1px; margin-bottom:-1px; display:flex; flex-direction:column; position:relative; transition:.25s; }
.serviceCard:hover { background:#1c1f1a; color:white; transform:translateY(-3px); z-index:2; }
.serviceNo { font: 700 10px/1 Arial; color:#96988f; letter-spacing:.12em; }
.serviceIcon { width:52px; height:52px; position:relative; margin:38px 0 25px; }
.serviceIcon i { position:absolute; background:var(--ink); height:2px; width:46px; top:25px; transform:rotate(-38deg); }
.serviceIcon i+ i { transform:rotate(38deg); width:30px; left:8px; }
.serviceCard:hover .serviceIcon i { background:var(--lime); }
.serviceCard h3 { font-size:22px; margin:0 0 14px; letter-spacing:-.03em; }
.serviceCard p { color:var(--muted); line-height:1.55; font-size:14px; margin:0 0 24px; }
.serviceCard:hover p { color:#b6b9b0; }
.serviceCard a { margin-top:auto; border-top:1px solid var(--line); padding-top:14px; text-transform:uppercase; font-size:9px; letter-spacing:.13em; display:flex; justify-content:space-between; }
.serviceCard a span { color:#8caf18; }

.comparison { background:#191c18; color:white; display:grid; grid-template-columns:58% 42%; min-height:700px; }
.comparisonImage { position:relative; overflow:hidden; }
.comparisonImage img { height:100%; object-fit:cover; }
.comparisonImage:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.1),transparent 60%); }
.tag { position:absolute; z-index:2; top:28px; background:#181b17; color:white; padding:9px 14px; font-size:9px; font-weight:700; letter-spacing:.15em; }
.tag.before { left:28px; }
.tag.after { right:28px; background:var(--lime); color:#111; }
.divider { position:absolute; z-index:2; top:0; bottom:0; left:50%; width:2px; background:white; box-shadow:0 0 0 5px rgba(255,255,255,.2); }
.comparisonCopy { padding:100px 6vw; }
.sectionLabel.light { color:#a6a9a0; }
.comparisonCopy h2 { font-size:clamp(44px,4vw,66px); margin-bottom:34px; }
.comparisonCopy>p:not(.sectionLabel) { color:#b3b6ad; line-height:1.7; font-size:15px; }
.comparisonCopy ul { list-style:none; padding:20px 0 0; margin:32px 0 0; border-top:1px solid #3d4039; }
.comparisonCopy li { padding:15px 0; border-bottom:1px solid #3d4039; font-size:12px; letter-spacing:.03em; }
.comparisonCopy li span { color:var(--lime); font-size:9px; margin-right:20px; }

.process { padding:120px 7vw; }
.processHead { display:grid; grid-template-columns: 2fr 1fr; gap:8vw; align-items:end; }
.processHead>p { color:var(--muted); line-height:1.6; max-width:350px; margin:0; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); margin-top:75px; position:relative; }
.steps:before { content:""; position:absolute; left:0; right:0; top:45px; height:1px; background:var(--line); }
.steps article { padding-right:35px; position:relative; }
.steps article>span { color:#92948b; font-size:10px; }
.stepDot { width:12px; height:12px; background:var(--paper); border:3px solid #242720; border-radius:50%; margin:28px 0 34px; position:relative; z-index:2; }
.steps article:first-child .stepDot { background:var(--lime); }
.steps h3 { font-size:20px; margin:0 0 12px; }
.steps p { color:var(--muted); font-size:13px; line-height:1.6; margin:0; }

.material { background:#232620; color:white; margin:0 2.5vw; padding:75px 5vw; display:grid; grid-template-columns:1fr 1.1fr; gap:7vw; }
.materialCopy h2 { font-size:clamp(40px,4vw,60px); }
.materialCopy>p:last-child { color:#afb2a9; line-height:1.65; max-width:540px; margin:30px 0 0; }
.materialStats { display:grid; grid-template-columns:repeat(3,1fr); align-items:center; }
.materialStats div { border-left:1px solid #464942; padding-left:28px; }
.materialStats strong,.materialStats span { display:block; }
.materialStats strong { color:var(--lime); font-size:30px; letter-spacing:-.04em; }
.materialStats span { color:#aeb1a8; font-size:10px; line-height:1.5; text-transform:uppercase; letter-spacing:.08em; margin-top:12px; }

.contact { padding:130px 7vw; display:grid; grid-template-columns: .8fr 1.2fr; gap:10vw; }
.contactCopy>p:not(.sectionLabel) { color:var(--muted); line-height:1.7; max-width:490px; margin:32px 0; }
.contactNote { border-left:3px solid var(--lime); padding:4px 0 4px 17px; margin-top:40px; }
.contactNote strong,.contactNote span { display:block; }
.contactNote strong { font-size:13px; }
.contactNote span { color:#81837b; font-size:10px; margin-top:7px; text-transform:uppercase; letter-spacing:.08em; }
form { background:white; padding:42px; box-shadow:0 20px 55px rgba(26,28,24,.08); }
.fieldRow { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
label { display:flex; flex-direction:column; gap:8px; font-size:9px; text-transform:uppercase; letter-spacing:.13em; font-weight:700; margin-bottom:20px; }
input,select,textarea { width:100%; border:0; border-bottom:1px solid #cfd1c9; background:transparent; padding:11px 0; outline:none; color:var(--ink); border-radius:0; }
textarea { resize:vertical; }
input:focus,select:focus,textarea:focus { border-color:#83a900; }
.uploadHint { border:1px dashed #bdc0b7; padding:14px; display:flex; gap:12px; align-items:center; color:#55584f; margin-bottom:20px; }
.uploadHint>span { font-size:22px; }
.uploadHint strong,.uploadHint small { display:block; }
.uploadHint strong { font-size:11px; }
.uploadHint small { font-size:9px; color:#969990; margin-top:3px; }
.check { flex-direction:row; text-transform:none; letter-spacing:0; font-weight:400; font-size:10px; align-items:flex-start; color:#777a71; }
.check input { width:14px; flex:0 0 14px; margin:0; }
.submit { width:100%; margin-top:8px; }
.success { min-height:440px; display:flex; align-items:flex-start; justify-content:center; flex-direction:column; }
.success>span { width:50px; height:50px; display:grid; place-items:center; background:var(--lime); border-radius:50%; font-size:24px; }
.success h3 { font-size:34px; margin:25px 0 10px; }
.success p { line-height:1.6; color:var(--muted); max-width:430px; }
.success button { border:0; border-bottom:1px solid; background:none; padding:8px 0; margin-top:20px; cursor:pointer; }
.form-alert { padding: 16px 18px; margin-bottom: 22px; font-size: 13px; line-height: 1.5; }
.form-alert.error { background: #fff0ed; color: #7d2016; border-left: 3px solid #b73525; }
.form-alert.success { background: #efffd0; color: #354608; border-left: 3px solid #89b000; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

footer { background:#161815; color:white; min-height:150px; padding:40px 5vw; display:flex; align-items:center; justify-content:space-between; }
.footerBrand .brandMark { font-size:24px; }
footer>p { color:#969990; font-size:11px; }
footer>div { display:flex; gap:25px; font-size:9px; color:#969990; text-transform:uppercase; letter-spacing:.1em; }

@media (max-width: 900px) {
  .nav nav { display:none; }
  .hero { grid-template-columns:1fr; }
  .heroCopy { min-height:720px; padding:150px 6vw; background:linear-gradient(90deg,rgba(20,23,19,.96),rgba(20,23,19,.62)); }
  .heroVisual { position:absolute; inset:0; }
  .heroFacts { left:6vw; }
  .intro,.comparison,.material,.contact { grid-template-columns:1fr; }
  .serviceGrid { grid-template-columns:repeat(2,1fr); }
  .comparisonImage { min-height:520px; }
  .steps { grid-template-columns:repeat(2,1fr); gap:50px 0; }
  .steps:before { display:none; }
  .materialStats { min-height:180px; }
}

@media (max-width: 600px) {
  .nav { height:70px; }
  .navCta { padding:10px; }
  .navCta span { margin-left:5px; }
  .hero { min-height:760px; }
  .heroCopy { padding:125px 6vw 200px; }
  h1 { font-size:52px; }
  .heroActions { flex-direction:column; align-items:flex-start; }
  .heroFacts { left:0; right:0; }
  .heroFacts div { min-width:0; padding:16px 12px; flex:1; }
  .heroFacts strong { font-size:18px; }
  .intro { padding-top:85px; }
  .serviceGrid { grid-template-columns:1fr; }
  .comparisonImage { min-height:420px; }
  .processHead { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .steps article { border-top:1px solid var(--line); padding-top:20px; }
  .stepDot { display:none; }
  .material { margin:0; padding:65px 6vw; }
  .materialStats { grid-template-columns:1fr; gap:25px; margin-top:20px; }
  .contact { padding:90px 5vw; }
  form { padding:25px; }
  .fieldRow { grid-template-columns:1fr; gap:0; }
  footer { flex-direction:column; align-items:flex-start; gap:28px; }
  footer>div { flex-wrap:wrap; }
}