:root {
  --paper: #f4f1e8;
  --ink: #1b1c1c;
  --muted: #696b66;
  --rule: #c9c7be;
  --accent: #a8e400;
  --accent-dark: #7dad00;
  --panel: #ece9df;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wrap { width: min(1180px, calc(100% - 72px)); margin: 0 auto; }

.site-header {
  min-height: 96px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 44px;
}
.brand {
  font-weight: 700;
  letter-spacing: -0.075em;
  font-size: 46px;
  line-height: 1;
}
.brand span, h1 span, .fit h2 span, .contact h2 span { color: var(--accent); }
.site-header nav { display: flex; gap: 36px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.site-header nav a { position: relative; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; background: var(--accent); transition: right .2s ease; }
.site-header nav a:hover::after { right: 0; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-height: 54px;
  padding: 0 28px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  transition: transform .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-outline { border: 1px solid #92948e; }
.button-accent { background: var(--accent); }
.button-accent:hover { background: #b5f207; }

.hero {
  min-height: 630px;
  display: grid;
  grid-template-columns: 1.45fr .8fr;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-copy { position: relative; z-index: 2; padding: 70px 0 80px; }
.eyebrow { font-size: 20px; font-weight: 600; margin: 0 0 24px; }
h1 {
  font-family: Anton, Impact, "Arial Narrow", sans-serif;
  font-size: clamp(70px, 8vw, 126px);
  line-height: .9;
  letter-spacing: -.02em;
  margin: 0;
  font-weight: 400;
}
.lede { max-width: 650px; font-size: 20px; line-height: 1.6; color: #51534f; margin: 28px 0 36px; }
.hero-art { height: 100%; min-height: 520px; position: relative; }
.marker-line { position: absolute; top: 68px; left: 52%; width: 1px; height: 250px; background: #a7aaa2; }
.marker-line i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); position: absolute; left: -4.5px; top: 0; }
.architecture { position: absolute; right: -90px; bottom: 0; width: 530px; height: 390px; overflow: hidden; }
.slab { position: absolute; background: #d7d5cd; border: 1px solid #c5c4bc; }
.slab-a { width: 560px; height: 170px; left: 36px; top: 5px; transform: skewY(-17deg); transform-origin: left bottom; }
.slab-b { width: 560px; height: 120px; left: 80px; top: 110px; transform: skewY(-17deg); background: #c8c6bf; }
.glass { position: absolute; width: 420px; height: 130px; background: #292b2b; left: 110px; top: 198px; transform: skewY(-17deg); }
.shadow { position: absolute; width: 480px; height: 160px; left: 120px; top: 245px; transform: skewY(-17deg); background: linear-gradient(135deg,#222 0%,#494b48 45%,#1d1e1e 100%); }

.full-rule { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 max(36px, calc((100vw - 1180px)/2));
}
.service-grid article { min-height: 260px; padding: 46px 40px; border-right: 1px solid var(--rule); }
.service-grid article:first-child { border-left: 1px solid var(--rule); }
.icon { width: 45px; height: 45px; margin-bottom: 26px; font-size: 42px; line-height: 1; position: relative; }
.storefront { border: 2px solid var(--ink); border-top: 0; width: 42px; height: 31px; margin-top: 12px; }
.storefront::before { content:""; position:absolute; left:-4px; right:-4px; top:-12px; height:12px; border:2px solid var(--ink); border-radius: 8px 8px 1px 1px; }
.storefront::after { content:""; width:8px; height:12px; background:var(--accent); position:absolute; right:5px; bottom:0; }
.review { font-family: Arial, sans-serif; }
.content { border: 2px solid var(--ink); display:grid; place-items:center; font-size:25px; }
.visibility { font-size: 36px; }
.service-grid h2 { font-size: 18px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 14px; }
.service-grid p { color: #50524e; line-height: 1.55; min-height: 50px; }
.service-grid a { font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: .07em; }
.service-grid a span { color: var(--accent-dark); font-size: 18px; padding-left: 8px; }

.dashboard-preview {
  border: 1px solid var(--rule);
  margin-top: 28px;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: .7fr repeat(4, 1fr);
  align-items: stretch;
  position: relative;
}
.preview-label { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; display:flex; align-items:center; justify-content:center; color:var(--muted); border-right:1px solid var(--rule); }
.metric { padding: 28px 30px; border-right: 1px solid var(--rule); }
.metric:last-child { border-right: 0; }
.metric span { display:block; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; font-weight: 700; }
.metric strong { display:block; font-size: 40px; font-weight:500; margin: 14px 0 4px; }
.metric strong i { color: var(--accent); font-style: normal; }
.metric small { color: var(--muted); }

.approach { display: grid; grid-template-columns: 1fr 1.15fr; min-height: 500px; }
.approach-copy { padding: 66px max(36px, calc((100vw - 1180px)/2)); padding-right: 70px; }
.section-kicker { color: var(--accent-dark); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 11px; margin: 0 0 24px; }
.section-kicker::before { content:""; display:inline-block; width:28px; height:2px; background:var(--accent); margin-right:12px; vertical-align:middle; }
.approach h2, .process h2, .fit h2, .contact h2 { font-size: clamp(42px, 5vw, 72px); letter-spacing: -.04em; line-height: 1.05; margin:0 0 24px; }
.approach-copy > p:last-child { max-width: 520px; color:#555752; line-height:1.65; font-size:17px; }
.approach-art { position:relative; overflow:hidden; background:#ddd9ce; }
.steps { position:absolute; left:12%; right:24%; bottom:0; height:55%; background: repeating-linear-gradient(to bottom, #e9e6dc 0 36px, #c3c0b7 36px 38px); clip-path: polygon(0 100%,100% 100%,100% 10%,85% 10%,85% 27%,68% 27%,68% 44%,52% 44%,52% 61%,35% 61%,35% 78%,18% 78%,18% 94%,0 94%); }
.ribs { position:absolute; right:0; top:0; bottom:0; width:28%; background: repeating-linear-gradient(90deg,#4b4d48 0 3px,#a5a399 3px 8px); }
.tree { position:absolute; left:36%; top:12%; font-size:130px; color:#7b806e; transform:rotate(9deg); opacity:.75; }

.process { padding-top: 110px; padding-bottom: 110px; display:grid; grid-template-columns: .8fr 1.4fr; gap: 80px; }
.process-title h2 { max-width: 430px; }
.process ol { list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.process li { display:grid; grid-template-columns:70px 150px 1fr; gap:26px; padding:30px 0; border-bottom:1px solid var(--rule); align-items:start; }
.process li span { color:var(--accent-dark); font-size:13px; font-weight:700; }
.process h3 { margin:0; text-transform:uppercase; letter-spacing:.04em; }
.process li p { margin:0; color:#555752; line-height:1.6; }

.fit { padding: 100px max(36px, calc((100vw - 1180px)/2)); }
.fit-grid { display:grid; grid-template-columns:1fr .8fr; align-items:end; gap:80px; }
.fit h2 { font-family: Anton, Impact, sans-serif; font-weight:400; font-size:clamp(64px,8vw,112px); line-height:.9; margin:0; }
.fit-grid > p { font-size:20px; line-height:1.65; color:#555752; max-width:520px; }

.contact { padding-top:110px; padding-bottom:110px; display:grid; grid-template-columns:1.2fr .8fr; gap:90px; align-items:end; }
.contact h2 { max-width:720px; margin:0; }
.contact-copy p { font-size:18px; color:#555752; line-height:1.65; margin-bottom:28px; }
.contact-copy small { display:block; margin-top:12px; color:#777970; }
.footer { min-height:110px; border-top:1px solid var(--rule); display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:38px; font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.footer-brand { font-size:34px; text-transform:none; }
.footer nav { display:flex; gap:22px; }

@media (max-width: 900px) {
  .wrap { width: min(100% - 36px, 720px); }
  .site-header { grid-template-columns:1fr auto; gap:18px; }
  .site-header nav { display:none; }
  .header-cta { display:none; }
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-copy { padding:70px 0 10px; }
  .hero-art { min-height:320px; }
  .architecture { right:-180px; transform:scale(.8); transform-origin:bottom right; }
  .service-grid { grid-template-columns:1fr 1fr; padding:0 18px; }
  .service-grid article { border-bottom:1px solid var(--rule); }
  .dashboard-preview { grid-template-columns:1fr 1fr; }
  .preview-label { display:none; }
  .metric:nth-child(3) { border-right:0; }
  .metric { border-bottom:1px solid var(--rule); }
  .approach { grid-template-columns:1fr; }
  .approach-copy { padding:70px 18px; }
  .approach-art { min-height:380px; }
  .process, .contact { grid-template-columns:1fr; gap:40px; }
  .fit-grid { grid-template-columns:1fr; gap:35px; }
  .footer { grid-template-columns:1fr 1fr; padding:30px 0; }
}

@media (max-width: 560px) {
  .brand { font-size:38px; }
  h1 { font-size:66px; }
  .eyebrow { font-size:16px; }
  .lede { font-size:17px; }
  .service-grid { grid-template-columns:1fr; }
  .service-grid article { border-left:1px solid var(--rule); }
  .dashboard-preview { grid-template-columns:1fr; }
  .metric { border-right:0; }
  .process li { grid-template-columns:45px 1fr; }
  .process li p { grid-column:2; }
  .fit h2 { font-size:70px; }
  .contact { padding-top:80px; padding-bottom:80px; }
  .footer { grid-template-columns:1fr; gap:16px; }
}