:root {
  --red: #ef302b;
  --ink: #111314;
  --paper: #f3f1eb;
  --line: #d9d7d1;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}
a {
  text-decoration: none;
  color: inherit;
}
.topbar {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  background: #fff;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.brand-mark {
  width: 42px;
  height: 42px;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 900;
  transform: skew(-7deg);
}
.brand b {
  display: block;
  font-size: 20px;
  letter-spacing: 0.08em;
}
.brand small {
  display: block;
  font-size: 8px;
  letter-spacing: 0.24em;
  margin-top: 2px;
}
.topbar nav {
  display: flex;
  gap: 38px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.topbar nav a:hover {
  color: var(--red);
}
.call-small {
  background: var(--ink);
  color: #fff;
  padding: 13px 17px;
  font-weight: 800;
}
.hero {
  height: calc(100vh - 82px);
  min-height: 650px;
  position: relative;
  color: #fff;
  display: flex;
  align-items: center;
  background: url("assets/hero.jpg") center 48% / cover no-repeat;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 10, 11, 0.94),
    rgba(8, 10, 11, 0.7) 43%,
    rgba(8, 10, 11, 0.15) 78%
  );
}
.hero-content {
  position: relative;
  z-index: 2;
  width: min(760px, 90%);
  margin-left: 8vw;
}
.eyebrow,
.kicker {
  font-size: 11px;
  letter-spacing: 0.24em;
  font-weight: 900;
  color: var(--red);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.eyebrow span {
  width: 38px;
  height: 3px;
  background: var(--red);
}
h1 {
  font-size: clamp(52px, 7vw, 106px);
  line-height: 0.89;
  letter-spacing: -0.055em;
  margin: 28px 0 26px;
  font-weight: 900;
  text-transform: uppercase;
}
h1 em,
h2 em {
  color: var(--red);
  font-style: normal;
}
.hero-content > p {
  font-size: 18px;
  line-height: 1.65;
  color: #dedede;
  max-width: 650px;
}
.hero-actions {
  display: flex;
  gap: 13px;
  margin-top: 34px;
}
.button {
  min-height: 57px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}
.primary {
  background: var(--red);
}
.ghost {
  border: 1px solid #ffffff66;
}
.availability {
  position: absolute;
  z-index: 2;
  right: 4vw;
  bottom: 35px;
  background: #fff;
  color: var(--ink);
  padding: 16px 22px 16px 48px;
}
.availability b,
.availability small {
  display: block;
}
.availability small {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}
.availability i {
  position: absolute;
  left: 22px;
  top: 22px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #29a75c;
  box-shadow: 0 0 0 6px #29a75c22;
}
.proof {
  background: var(--ink);
  color: #fff;
  padding: 25px 8vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.proof div {
  display: flex;
  gap: 15px;
  border-right: 1px solid #ffffff25;
}
.proof span {
  font-size: 11px;
  color: #929292;
}
.proof b {
  font-size: 12px;
}
.section {
  padding: 110px 8vw;
}
.heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 80px;
  margin-bottom: 52px;
}
.heading h2,
.split-copy h2,
.contact h2 {
  font-size: clamp(42px, 5vw, 74px);
  line-height: 0.97;
  letter-spacing: -0.05em;
  margin: 16px 0 0;
  text-transform: uppercase;
}
.heading > p {
  max-width: 480px;
  color: #5f6162;
  line-height: 1.7;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.service-grid article {
  padding: 35px;
  background: #fff;
  min-height: 390px;
}
.service-top {
  display: flex;
  justify-content: space-between;
  color: var(--red);
  font-size: 28px;
}
.service-top span {
  font-size: 12px;
  color: #aaa;
}
.service-grid h3 {
  font-size: 25px;
  margin: 55px 0 16px;
}
.service-grid article > p {
  color: #656768;
  line-height: 1.65;
  font-size: 14px;
  min-height: 70px;
}
.service-grid ul {
  list-style: none;
  margin: 26px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #eee;
}
.service-grid li {
  font-size: 12px;
  margin: 10px 0;
}
.dark {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  background: var(--ink);
  min-height: 720px;
  color: #fff;
}
.split-image {
  background: url("assets/action.jpg") center/cover no-repeat;
}
.split-copy {
  padding: 110px 8vw 90px 7vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kicker.light {
  color: #fff;
}
.split-copy p {
  color: #aaa;
  line-height: 1.8;
}
.text-link {
  margin-top: 35px;
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
}
.gallery {
  background: #fff;
}
.gallery-grid {
  height: 560px;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}
.gallery-grid figure {
  margin: 0;
  overflow: hidden;
}
.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-main {
  grid-row: 1/3;
}
.area{padding:110px 8vw;background:#151718;color:#fff;position:relative}.area:before{content:"";position:absolute;width:420px;height:420px;border:1px solid #ffffff0d;border-radius:50%;right:-120px;top:-170px;box-shadow:0 0 0 80px #ffffff05,0 0 0 160px #ffffff03}.area-head{display:grid;grid-template-columns:1fr auto;gap:70px;align-items:end;margin-bottom:60px;position:relative}.area-copy h2{font-size:clamp(38px,4vw,64px);line-height:1;letter-spacing:-.05em;text-transform:uppercase;margin:18px 0 28px}.area-copy h2 em{color:var(--red)}.area-copy p{color:#9b9d9e;line-height:1.7;max-width:600px}.radius{width:205px;height:205px;border:1px solid #ffffff2b;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}.radius span,.radius small{font-size:9px;letter-spacing:.2em;font-weight:800;color:#929596}.radius strong{font-size:61px;line-height:.95;letter-spacing:-.07em;color:var(--red);margin:8px 0}.featured-cities{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ffffff24;border-left:1px solid #ffffff24;position:relative}.city-card{min-height:145px;border-right:1px solid #ffffff24;border-bottom:1px solid #ffffff24;padding:22px;display:grid;grid-template-columns:1fr auto;align-content:space-between;transition:.25s}.city-card:hover{background:var(--red)}.city-card>span{color:#67696a;font-size:10px;font-weight:800}.city-card i{color:var(--red);font-style:normal}.city-card:hover i,.city-card:hover>span{color:#fff}.city-card strong{grid-column:1/3;font-size:clamp(20px,2vw,29px);text-transform:uppercase;letter-spacing:-.03em}.other-cities{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:28px;margin-top:32px;position:relative}.other-label{font-size:9px;letter-spacing:.18em;color:#777;font-weight:900}.other-cities>div{display:flex;flex-wrap:wrap;gap:8px}.city-pill{border:1px solid #ffffff20;padding:9px 12px;font-size:11px;color:#c7c8c8}.area-phone{display:inline-flex;align-items:center;gap:10px;color:var(--red);font-size:11px;font-weight:900;letter-spacing:.06em;white-space:nowrap}
.contact {
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: 105px 20px;
}
.contact p {
  font-size: 17px;
  max-width: 630px;
  margin: 25px auto 35px;
  line-height: 1.65;
}
.phone-big {
  display: inline-block;
  background: #fff;
  color: var(--ink);
  padding: 20px 28px;
  font-weight: 900;
  font-size: clamp(24px, 4vw, 43px);
}
.location {
  margin-top: 25px;
  font-weight: 700;
}
footer {
  min-height: 110px;
  background: #0b0c0d;
  color: #fff;
  padding: 28px 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
footer p,
footer > span {
  font-size: 11px;
  color: #888;
}
.mobile-call {
  display: none;
}
.floating-call{position:fixed;z-index:45;right:25px;bottom:25px;display:flex;align-items:center;gap:13px;background:#fff;padding:8px 8px 8px 16px;box-shadow:0 12px 35px #0004;border:1px solid #eee;transition:.25s}.floating-call:hover{transform:translateY(-4px);box-shadow:0 18px 42px #0005}.floating-call span small,.floating-call span b{display:block}.floating-call span small{font-size:8px;letter-spacing:.16em;color:#888;margin-bottom:3px}.floating-call span b{font-size:15px;letter-spacing:.03em}.floating-call i{width:48px;height:48px;display:grid;place-items:center;background:var(--red);color:#fff;font-style:normal;font-size:20px}
@media (max-width: 800px) {
  .topbar {
    height: 70px;
    padding: 0 20px;
  }
  .topbar nav,
  .call-small {
    display: none;
  }
  .hero {
    height: auto;
    min-height: 720px;
    align-items: flex-start;
    padding-top: 110px;
    background-position: 58% center;
  }
  .hero-shade {
    background: linear-gradient(
      90deg,
      rgba(8, 10, 11, 0.92),
      rgba(8, 10, 11, 0.42)
    );
  }
  .hero-content {
    margin: 0 22px;
  }
  .hero-actions {
    flex-direction: column;
  }
  .availability {
    display: none;
  }
  .proof {
    grid-template-columns: 1fr;
    padding: 28px 25px;
  }
  .proof div {
    border-right: 0;
    border-bottom: 1px solid #ffffff20;
    padding-bottom: 15px;
  }
  .section {
    padding: 75px 22px;
  }
  .heading {
    display: block;
    margin-bottom: 38px;
  }
  .heading > p {
    margin-top: 25px;
  }
  .service-grid {
    grid-template-columns: 1fr;
  }
  .service-grid article {
    min-height: auto;
  }
  .dark {
    grid-template-columns: 1fr;
  }
  .split-image {
    min-height: 430px;
  }
  .split-copy {
    padding: 70px 25px;
  }
  .gallery-grid {
    height: 650px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.25fr 0.75fr;
  }
  .gallery-main {
    grid-column: 1/3;
    grid-row: auto;
  }
  .area { padding: 75px 22px; }
  .area-head { grid-template-columns: 1fr; gap: 35px; margin-bottom: 40px; }
  .radius { width: 150px; height: 150px; }
  .radius strong { font-size: 45px; }
  .featured-cities { grid-template-columns: repeat(2, 1fr); }
  .city-card { min-height: 120px; padding: 16px; }
  .other-cities { grid-template-columns: 1fr; gap: 18px; }
  .area-copy h2 { font-size: 40px; }
  .contact {
    padding: 75px 20px;
  }
  footer {
    padding-bottom: 90px;
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  .mobile-call {
    position: fixed;
    display: flex;
    z-index: 50;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: #fff;
    font-weight: 900;
  }
  .floating-call { display: none; }
}