:root {
  --black: #1c1c1c;
  --ink: #242424;
  --maroon: #7a2431;
  --gray: #8d8e8f;
  --stone: #efede9;
  --white: #ffffff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { display: block; max-width: 100%; }

.site-header {
  min-height: 118px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 18px clamp(24px, 5vw, 82px);
  background: var(--white);
}

.brand { display: inline-block; width: clamp(220px, 22vw, 330px); }
.brand img { width: 100%; height: auto; }

.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 42px);
}

.phone,
.text-link {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}

.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.button:hover { transform: translateY(-2px); }
.button-dark { color: var(--white); background: var(--black); }
.button-light { color: var(--black); background: var(--white); }
.button-maroon { color: var(--white); background: var(--maroon); }
.button-outline { border-color: rgba(255,255,255,.45); color: var(--white); }

.hero {
  min-height: min(790px, calc(100vh - 118px));
  position: relative;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--black);
}

.hero-image,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-image { object-fit: cover; object-position: center; }
.hero-shade { background: linear-gradient(90deg, rgba(17,17,17,.88) 0%, rgba(17,17,17,.65) 42%, rgba(17,17,17,.12) 76%), linear-gradient(0deg, rgba(17,17,17,.45), transparent 48%); }

.hero-content {
  position: relative;
  z-index: 1;
  width: min(790px, 100%);
  padding: clamp(52px, 8vw, 112px) clamp(24px, 6vw, 96px);
  color: var(--white);
}

.eyebrow,
.section-number {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 38px;
  height: 3px;
  margin: 0 14px 3px 0;
  background: var(--maroon);
}

h1,
h2 {
  margin: 0;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: -.055em;
}

h1 {
  max-width: 700px;
  font-size: clamp(66px, 8.3vw, 132px);
  line-height: .84;
  text-transform: uppercase;
}

.hero-copy {
  max-width: 635px;
  margin: 34px 0 38px;
  font-size: clamp(17px, 1.45vw, 22px);
  font-weight: 600;
  line-height: 1.55;
}

.hero-row {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.opening-date {
  min-width: 226px;
  padding-left: 18px;
  border-left: 4px solid var(--maroon);
}

.opening-date span,
.opening-date strong { display: block; text-transform: uppercase; }
.opening-date span { margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.opening-date strong { font-size: 19px; letter-spacing: .04em; }

.intro {
  padding: clamp(72px, 9vw, 140px) clamp(24px, 6vw, 96px) 0;
  background: var(--white);
}

.section-number { color: var(--maroon); }

.intro-copy {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(50px, 10vw, 170px);
  align-items: end;
}

.intro h2,
.feature h2,
.contact h2 {
  font-size: clamp(44px, 5.5vw, 84px);
  line-height: .96;
}

.intro-copy > p,
.feature-copy > p,
.contact > p {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.65;
}

.service-line {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(62px, 8vw, 110px);
  border-top: 1px solid #d5d1cb;
  border-bottom: 1px solid #d5d1cb;
}

.service-line span {
  padding: 27px 20px;
  border-right: 1px solid #d5d1cb;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

.service-line span:last-child { border-right: 0; }

.exterior-banner {
  min-height: 680px;
  position: relative;
  display: grid;
  align-items: end;
  margin-top: clamp(72px, 9vw, 140px);
  overflow: hidden;
  background: var(--black);
}

.exterior-banner > img,
.exterior-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.exterior-banner > img {
  object-fit: cover;
  object-position: center 42%;
}

.exterior-shade {
  background: linear-gradient(90deg, rgba(15,15,15,.84) 0%, rgba(15,15,15,.48) 42%, rgba(15,15,15,.05) 74%),
              linear-gradient(0deg, rgba(15,15,15,.52), transparent 50%);
}

.exterior-copy {
  position: relative;
  z-index: 1;
  width: min(730px, 100%);
  padding: clamp(54px, 8vw, 108px) clamp(24px, 6vw, 96px);
  color: var(--white);
}

.exterior-copy h2 {
  margin-bottom: 26px;
  font-size: clamp(44px, 5.5vw, 84px);
  line-height: .96;
}

.exterior-copy > p:last-child {
  max-width: 590px;
  margin: 0;
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 600;
  line-height: 1.6;
}

.feature {
  display: grid;
  grid-template-columns: 1.45fr .85fr;
  min-height: 650px;
  margin: clamp(72px, 9vw, 140px) clamp(24px, 6vw, 96px) 0;
  background: var(--stone);
}

.feature-truck { grid-template-columns: .85fr 1.45fr; background: var(--black); color: var(--white); }
.feature-truck .feature-media { order: 2; }
.feature-truck .feature-copy { order: 1; }

.feature-media { min-height: 540px; overflow: hidden; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }

.feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(46px, 6vw, 92px);
}

.feature-copy h2 { margin-bottom: 30px; }
.feature-copy .text-link { width: fit-content; margin-top: 38px; padding-bottom: 8px; border-bottom: 2px solid var(--maroon); }

.contact {
  padding: clamp(90px, 12vw, 180px) clamp(24px, 6vw, 96px);
  color: var(--white);
  background: var(--maroon);
  text-align: center;
}

.contact .eyebrow::before { background: var(--white); }
.contact h2 { max-width: 900px; margin: 0 auto 28px; }
.contact > p { max-width: 600px; margin: 0 auto; }
.contact-actions { display: flex; justify-content: center; gap: 14px; margin-top: 42px; flex-wrap: wrap; }
.contact address { margin-top: 48px; font-size: 12px; font-style: normal; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 30px;
  padding: 42px clamp(24px, 6vw, 96px);
  border-top: 1px solid #ddd;
  background: var(--white);
}

footer img { width: 170px; }
footer p { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
footer p:last-child { text-align: right; }

@media (max-width: 850px) {
  .site-header { min-height: 92px; }
  .brand { width: 205px; }
  .phone { display: none; }
  .header-actions .button { min-height: 44px; padding: 0 16px; }
  .hero { min-height: calc(100svh - 92px); }
  .hero-shade { background: linear-gradient(90deg, rgba(17,17,17,.86), rgba(17,17,17,.4)), linear-gradient(0deg, rgba(17,17,17,.55), transparent 55%); }
  .hero-content { padding-bottom: 54px; }
  .intro-copy { grid-template-columns: 1fr; gap: 32px; }
  .service-line { grid-template-columns: repeat(2, 1fr); }
  .service-line span:nth-child(2) { border-right: 0; }
  .service-line span:nth-child(-n+2) { border-bottom: 1px solid #d5d1cb; }
  .feature,
  .feature-truck { grid-template-columns: 1fr; margin-left: 0; margin-right: 0; }
  .feature-media,
  .feature-truck .feature-media { order: 1; min-height: 440px; }
  .feature-copy,
  .feature-truck .feature-copy { order: 2; }
  footer { grid-template-columns: 1fr; align-items: start; }
  footer p:last-child { text-align: left; }
}

@media (max-width: 560px) {
  .site-header { padding: 14px 18px; }
  .brand { width: 174px; }
  .header-actions .button { font-size: 10px; letter-spacing: .08em; }
  h1 { font-size: clamp(56px, 18vw, 78px); }
  .hero-content { padding-left: 22px; padding-right: 22px; }
  .hero-row { align-items: stretch; flex-direction: column; }
  .hero-row .button { width: fit-content; }
  .feature-media { min-height: 320px; }
  .exterior-banner { min-height: 560px; }
  .exterior-banner > img { object-position: 62% center; }
  .exterior-shade { background: linear-gradient(90deg, rgba(15,15,15,.84), rgba(15,15,15,.34)), linear-gradient(0deg, rgba(15,15,15,.62), transparent 62%); }
  .feature-copy { padding: 46px 24px 58px; }
  .contact-actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}