:root {
  --bg: #ffffff;
  --surface: #f4f4f5;
  --fg: #1b1d22;
  --muted: #5a5c61;
  --border: #e4e4e7;
  --accent: #c5a572;
  --dark: #0f1115;
  --steel: #6d6e71;
  --accent-soft: color-mix(in oklch, var(--accent) 18%, transparent);
  --dark-soft: color-mix(in oklch, var(--dark) 8%, transparent);
  --font-display: 'Inter Tight', 'Eurostile Extended', 'Bank Gothic', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --container: 1180px;
  --gutter: 28px;
  --radius: 2px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(58px, 7vw, 104px); }
.section + .section { border-top: 1px solid var(--border); }
.muted-section { background: var(--surface); }
.dark-section { background: var(--dark); color: var(--bg); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.stack > * + * { margin-top: 20px; }

.topnav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklch, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.topnav-inner { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand-logo { width: 156px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 26px; color: var(--muted); font-size: 14px; font-weight: 600; }
.nav-links a:hover { color: var(--fg); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.phone-link { font-family: var(--font-mono); font-size: 13px; color: var(--fg); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 800;
  letter-spacing: .01em;
}
.btn-primary { background: var(--accent); color: var(--dark); border-color: var(--accent); }
.btn-secondary { background: transparent; color: var(--fg); border-color: var(--steel); }
.dark-section .btn-secondary, .hero .btn-secondary { color: var(--bg); border-color: color-mix(in oklch, var(--bg) 35%, transparent); }
.btn:hover { transform: translateY(-1px); }

.eyebrow {
  margin: 0 0 18px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
h1, .h1 { font-size: clamp(46px, 7vw, 86px); line-height: .96; }
h2, .h2 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.02; }
h3, .h3 { font-size: 22px; line-height: 1.15; }
.lead { color: var(--muted); font-size: 19px; line-height: 1.55; max-width: 58ch; margin: 0; }
.dark-section .lead, .hero .lead { color: color-mix(in oklch, var(--bg) 72%, transparent); }
.meta, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.meta { color: var(--muted); font-size: 13px; }

.hero {
  min-height: 720px;
  display: grid;
  align-items: end;
  color: var(--bg);
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--dark) 92%, transparent), color-mix(in oklch, var(--dark) 52%, transparent)),
    url('../assets/hero-roof.jpg') center / cover;
}
.hero-panel { max-width: 760px; padding-block: 96px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid color-mix(in oklch, var(--bg) 24%, transparent); margin-top: 52px; }
.proof-cell { padding: 20px 20px 0 0; }
.proof-cell strong { display: block; font-family: var(--font-display); font-size: 28px; text-transform: uppercase; }
.proof-cell span { color: color-mix(in oklch, var(--bg) 68%, transparent); font-size: 14px; }

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
}
.muted-section .card { background: var(--bg); }
.service-card { min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; }
.service-card p { color: var(--muted); margin: 14px 0 0; }
.service-card .meta { margin-top: 26px; color: var(--steel); }

.photo-card {
  min-height: 390px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface) center / cover;
  display: flex;
  align-items: end;
  overflow: hidden;
}
.photo-caption {
  width: 100%;
  padding: 20px;
  background: color-mix(in oklch, var(--dark) 78%, transparent);
  color: var(--bg);
}
.photo-caption p { margin: 6px 0 0; color: color-mix(in oklch, var(--bg) 72%, transparent); }

.quote {
  max-width: 880px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -.025em;
  margin: 0;
}
.quote-author { margin-top: 24px; color: var(--muted); }

.log-row {
  display: grid;
  grid-template-columns: 180px 1fr 140px;
  gap: 28px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  align-items: start;
}
.log-row p { margin: 7px 0 0; color: var(--muted); }
.pull { text-align: right; }

.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: start; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { color: var(--muted); font-size: 13px; }
.input, .textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}
.textarea { min-height: 128px; resize: vertical; }

.pagehead { background: var(--dark); color: var(--bg); padding-block: 92px; }
.pagehead .lead { color: color-mix(in oklch, var(--bg) 70%, transparent); }
.pagefoot { background: var(--dark); color: var(--bg); padding-block: 56px; }
.footer-logo { width: 150px; }
.pagefoot a, .pagefoot span { color: color-mix(in oklch, var(--bg) 72%, transparent); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.footer-grid h3 { font-size: 15px; margin-bottom: 12px; }
.footer-grid p { margin: 0; color: color-mix(in oklch, var(--bg) 72%, transparent); }
.footer-links { display: grid; gap: 8px; }

@media (max-width: 960px) {
  .grid-2, .grid-3, .grid-4, .contact-grid, .footer-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .hero { min-height: 640px; }
  .hero-proof { grid-template-columns: 1fr; }
  .log-row { grid-template-columns: 1fr; gap: 8px; }
  .pull { text-align: left; }
}

@media (max-width: 640px) {
  .container { padding-inline: 20px; }
  .brand-logo { width: 128px; }
  .phone-link { display: none; }
  .hero-panel { padding-block: 72px; }
  h1, .h1 { font-size: 44px; }
}