:root {
  --red: #d8232a;
  --red-dark: #a9161b;
  --black: #111214;
  --charcoal: #1b1d20;
  --gray: #62676d;
  --light: #f5f3ef;
  --white: #ffffff;
  --border: #dedbd5;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Roboto", Arial, sans-serif; color: var(--black); background: var(--white); line-height: 1.6; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(17,18,20,.96); color: var(--white); border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; font-family: "Oswald", sans-serif; font-size: 1.65rem; letter-spacing: .06em; }
.brand strong { color: var(--red); }
.brand-mark { width: 34px; height: 34px; color: var(--red); transform: rotate(-8deg); }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a { color: #f5f5f5; text-decoration: none; font-weight: 700; font-size: .95rem; }
.main-nav a:hover { color: var(--red); }
.nav-cta { border: 1px solid var(--red); padding: 9px 16px; border-radius: 3px; }
.menu-button { display: none; background: transparent; color: white; border: 1px solid #555; padding: 8px 12px; border-radius: 3px; }
.hero { position: relative; min-height: 700px; display: grid; align-items: center; color: var(--white); background: linear-gradient(115deg,#090a0c 0%,#1c1f23 54%,#383d42 100%); overflow: hidden; }
.hero::after { content:""; position:absolute; inset:auto -8% -32% 38%; height:78%; transform:skewX(-12deg); background:linear-gradient(135deg,rgba(216,35,42,.9),rgba(216,35,42,.1)); }
.hero::before { content:""; position:absolute; width:620px; height:250px; right:5%; top:24%; border:12px solid rgba(255,255,255,.08); border-radius:55% 45% 30% 20% / 55% 55% 30% 30%; transform:rotate(-4deg); }
.hero-overlay { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to right,black,transparent); }
.hero-content { position: relative; z-index: 2; max-width: 790px; padding-block: 120px; }
.eyebrow { margin: 0 0 14px; color: var(--red); text-transform: uppercase; font-weight: 800; letter-spacing: .16em; font-size: .78rem; }
h1,h2,h3 { font-family: "Oswald", sans-serif; text-transform: uppercase; line-height: 1.05; margin-top: 0; }
h1 { font-size: clamp(3.7rem, 9vw, 7.6rem); margin-bottom: 24px; letter-spacing: -.025em; }
h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); margin-bottom: 20px; }
h3 { font-size: 1.7rem; margin-bottom: 12px; }
.hero-copy { max-width: 680px; font-size: 1.18rem; color: #e0e2e4; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 50px; padding: 0 22px; border: 0; border-radius: 3px; text-decoration: none; text-transform: uppercase; font-weight: 800; letter-spacing: .05em; cursor: pointer; }
.button-primary { background: var(--red); color: white; }
.button-primary:hover { background: var(--red-dark); }
.button-secondary { border: 1px solid rgba(255,255,255,.5); color: white; }
.button-light { background: white; color: var(--black); }
.section { padding: 100px 0; }
.section-heading { max-width: 760px; margin-bottom: 46px; }
.section-heading > p:last-child { color: var(--gray); font-size: 1.08rem; }
.card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.service-card { border: 1px solid var(--border); padding: 34px; background: var(--white); transition: transform .2s ease,border-color .2s ease; }
.service-card:hover { transform: translateY(-5px); border-color: var(--red); }
.service-number { font-family: "Oswald",sans-serif; color: var(--red); font-size: 1.2rem; margin-bottom: 45px; }
.service-card p { color: var(--gray); }
.section-dark { background: var(--charcoal); color: white; }
.section-heading.light > p:last-child { color: #bfc2c5; }
.project-grid { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: 290px 290px; gap: 18px; }
.project-card { position: relative; display:flex; align-items:flex-end; padding:24px; min-height:250px; background-size:cover; background-position:center; overflow:hidden; }
.project-card::before { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.05)); }
.project-card span { position:relative; z-index:1; font-family:"Oswald"; font-size:1.7rem; text-transform:uppercase; }
.project-one { grid-row:1 / span 2; background-image:linear-gradient(135deg,#4a4e53,#17191c); }
.project-two { background-image:linear-gradient(135deg,#7b1d22,#222); }
.project-three { background-image:linear-gradient(135deg,#596169,#202326); }
.project-card::after { content:"ADD YOUR PHOTO"; position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); color:rgba(255,255,255,.28); font-weight:900; letter-spacing:.14em; white-space:nowrap; }
.split-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.about-copy { color:var(--gray); font-size:1.08rem; }
.text-link { color:var(--red); font-weight:800; text-decoration:none; }
.cta-band { background:var(--red); color:white; padding:58px 0; }
.cta-band .eyebrow { color:#ffd7d9; }
.cta-band h2 { margin-bottom:0; }
.cta-layout { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.contact-section { background:var(--light); }
.contact-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; }
.contact-details { margin-top:32px; }
.contact-details a { color:var(--red); }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:18px; background:white; padding:34px; border:1px solid var(--border); }
.contact-form label { display:grid; gap:7px; font-weight:700; font-size:.92rem; }
.contact-form label:nth-of-type(4), .contact-form label:nth-of-type(5), .contact-form button, .form-note { grid-column:1 / -1; }
input,textarea { width:100%; padding:13px 14px; border:1px solid #cfd1d2; border-radius:2px; font:inherit; background:#fff; }
input:focus,textarea:focus { outline:2px solid rgba(216,35,42,.22); border-color:var(--red); }
.form-note { color:var(--gray); font-size:.82rem; margin:0; }
.site-footer { background:#0d0e10; color:#aeb2b5; padding:36px 0; }
.footer-layout { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; align-items:center; }
.footer-layout p { margin:0; }
.footer-layout p:last-child { text-align:right; }
.footer-brand { font-size:1.3rem; }
@media (max-width: 850px) {
  .menu-button { display:block; }
  .main-nav { display:none; position:absolute; top:76px; left:0; right:0; padding:24px 20px; background:#111214; flex-direction:column; align-items:flex-start; border-top:1px solid #333; }
  .main-nav.open { display:flex; }
  .hero { min-height:620px; }
  .card-grid,.split-layout,.contact-layout { grid-template-columns:1fr; }
  .project-grid { grid-template-columns:1fr; grid-template-rows:auto; }
  .project-one { grid-row:auto; }
  .cta-layout { align-items:flex-start; flex-direction:column; }
  .footer-layout { grid-template-columns:1fr; }
  .footer-layout p:last-child { text-align:left; }
}
@media (max-width: 560px) {
  .container { width:min(calc(100% - 28px),var(--max)); }
  .section { padding:72px 0; }
  h1 { font-size:3.5rem; }
  .contact-form { grid-template-columns:1fr; padding:22px; }
  .contact-form label { grid-column:1 / -1; }
}