:root {
  --gold: #efb52f;
  --gold2: #ffcf58;
  --ink: #0c1117;
  --ink2: #171d24;
  --paper: #f7f7f5;
  --text: #20252b;
  --muted: #68717a;
  --max: 1220px
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  color: var(--text);
  background: var(--paper);
  line-height: 1.6
}
img {
  max-width: 100%;
  display: block
}
a {
  color: inherit;
  text-decoration: none
}
.container {
  width: min(var(--max), calc(100% - 240px));
  margin: auto
}
.topbar {
  background: #000000;
  color: #fff;
  font-size: 1rem
}
.topbar .container {
  display: flex;
  justify-content: flex-end;
  gap: 28px;
  padding: 8px 0
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #000000;
  box-shadow: 0 6px 20px #000000
}
.nav {
  height: 175px;
  display: flex;
  align-items: center;
  gap: 32px
}
.brand img {
  width: 350px;
  height: 175px;
  object-fit: contain;
  object-position: left center
}
.navlinks {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase
}
.navlinks > a, .mega-trigger {
  padding: 34px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  cursor: pointer
}
.navlinks > a:hover, .mega-trigger:hover {
  color: var(--gold)
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  color: #111;
  padding: 13px 22px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: .82rem;
  border: 1px solid var(--gold);
  transition: .2s
}
.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05)
}
.btn.outline {
  background: transparent;
  color: #fff
}
.menu-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  color: #fff;
  font-size: 1.7rem
}
.mega-wrap {
  position: relative
}
.mega {
  position: absolute;
  left: 50%;
  top: 86px;
  transform: translateX(-50%) translateY(8px);
  width: min(1050px, 92vw);
  background: #0e141b;
  color: #fff;
  border: 1px solid #efb52f66;
  box-shadow: 0 24px 70px #000a;
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.15fr;
  gap: 25px;
  opacity: 0;
  visibility: hidden;
  transition: .2s
}
.mega-wrap:hover .mega, .mega-wrap.open .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0)
}
.mega h4 {
  margin: 0 0 11px;
  color: var(--gold);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase
}
.mega a {
  display: block;
  color: #d5d9dd;
  padding: 5px 0;
  font-size: .83rem
}
.mega a:hover {
  color: var(--gold)
}
.mega-cta {
  background: linear-gradient(145deg, #1c242d, #0b0f14);
  border: 1px solid #ffffff1f;
  padding: 22px
}
.mega-cta p {
  font-size: .82rem;
  color: #cdd3d8
}
.hero {
  min-height: 700px;
  position: relative;
  display: flex;
  align-items: center;
  color: #fff;
  background: url('../images/hero-house.jpg') center/cover no-repeat
}
.hero:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #070a0fe8 0%, #0b1017ab 42%, #0b101733 75%, #0005)
}
.hero .container {
  position: relative;
  padding: 90px 0 130px
}
.eyebrow {
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .16em;
  font-size: 1.75rem
}
.hero h1, .page-hero h1, h2 {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  text-transform: uppercase;
  line-height: .97
}
.hero h1 {
  font-size: clamp(3.2rem, 7vw, 6rem);
  max-width: 760px;
  margin: 14px 0 22px
}
.hero h1 span, h2 span {
  color: var(--gold)
}
.hero p {
  max-width: 620px;
  font-size: 1.08rem
}
.actions {
  display: flex;
  gap: 14px;
  margin-top: 28px
}
.ribbon {
  position: absolute;
  left: 50%;
  bottom: -42px;
  transform: translateX(-50%);
  width: min(var(--max), calc(100% - 40px));
  background: #11171e;
  border: 1px solid #ffffff1b;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  box-shadow: 0 16px 30px #0004
}
.ribbon a {
  color: #fff;
  text-align: center;
  padding: 18px 8px;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 800;
  border-right: 1px solid #efb52f55
}
.ribbon a:last-child {
  border: 0
}
.ribbon b {
  display: block;
  color: var(--gold);
  font-size: 1.5rem
}
.section {
  padding: 105px 0
}
.light {
  background: #fff
}
.dark {
  background: linear-gradient(145deg, #11171e, #080b0f);
  color: #fff
}
.section h2 {
  font-size: clamp(2.3rem, 4vw, 4rem);
  margin: 8px 0 24px
}
.center {
  text-align: center
}
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 70px;
  align-items: center
}
.collage {
  display: grid;
  grid-template-columns: 1.3fr .8fr;
  gap: 8px;
  position: relative
}
.collage .main {
  grid-row: span 2;
  height: 520px;
  object-fit: cover
}
.collage img:not(.main) {
  height: 256px;
  object-fit: cover
}
.badge {
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #111;
  color: #fff;
  border: 2px solid var(--gold);
  padding: 20px;
  text-align: center
}
.badge strong {
  font-size: 2.5rem;
  color: var(--gold);
  display: block
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 38px
}
.card {
  background: #10161d;
  border: 1px solid #efb52f77;
  overflow: hidden
}
.card img {
  width: 100%;
  height: 220px;
  object-fit: cover
}
.card .pad {
  padding: 22px
}
.card h3 {
  font-family: 'Barlow Condensed';
  text-transform: uppercase;
  font-size: 1.55rem;
  margin: 0 0 5px
}
.card p {
  color: #c9d0d6;
  font-size: .9rem
}
.page-hero {
  background: linear-gradient(90deg, #090d13e8, #090d1377), url('../images/hero-house.jpg') center/cover;
  padding: 125px 0;
  color: #fff
}
.page-hero h1 {
  font-size: clamp(3rem, 6vw, 5.4rem);
  margin: 10px 0
}
.breadcrumbs {
  font-size: .8rem;
  color: #d9dde1
}
.content {
  max-width: 850px;
  margin: auto
}
.content h2 {
  margin-top: 48px
}
.service-detail {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 55px;
  align-items: start
}
.service-detail img {
  height: 520px;
  width: 100%;
  object-fit: cover
}
.checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  padding: 0
}
.checklist li {
  list-style: none;
  padding-left: 22px;
  position: relative
}
.checklist li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 900
}
.portfolio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}
.portfolio figure {
  margin: 0;
  background: #111;
  color: #fff
}
.portfolio img {
  height: 250px;
  width: 100%;
  object-fit: cover
}
.portfolio figcaption {
  padding: 15px;
  font-weight: 700
}
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}
.form label {
  font-weight: 700;
  font-size: .85rem
}
.form input, .form select, .form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 13px;
  border: 1px solid #cbd0d5;
  background: #fff;
  font: inherit
}
.form .full {
  grid-column: 1/-1
}
.faq details {
  background: #fff;
  border: 1px solid #ddd;
  margin: 10px 0;
  padding: 16px 20px
}
.faq summary {
  font-weight: 800;
  cursor: pointer
}
.footer {
  background: #000000;
  color: #ffffff;
  padding: 55px 0 0
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 45px
}
.footer h4 {
  color: #fff;
  text-transform: uppercase
}
.footer a, .footer span {
  display: block;
  padding: 3px 0;
  font-size: .88rem
}
.footer img {
  width: 260px
}
.copyright {
  margin-top: 40px;
  background: var(--gold);
  color: #111;
  padding: 10px 0;
  font-size: .78rem
}
.notice {
  background: #fff5d8;
  border-left: 4px solid var(--gold);
  padding: 16px
}
.mockup {
  box-shadow: 0 20px 60px #0004;
  border: 1px solid #ddd
}
.hidden {
  display: none
}
@media(max-width:980px) {
  .navlinks {
    display: none;
    position: absolute;
    top: 92px;
    left: 0;
    right: 0;
    background: #0c1117;
    padding: 20px;
    flex-direction: column;
    align-items: stretch
  }
  .navlinks.show {
    display: flex
  }
  .navlinks > a, .mega-trigger {
    padding: 10px
  }
  .menu-toggle {
    display: block
  }
  .mega {
    position: static;
    transform: none !important;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    display: none;
    opacity: 1;
    visibility: visible;
    margin-top: 8px
  }
  .mega-wrap.open .mega {
    display: grid
  }
  .grid2, .service-detail {
    grid-template-columns: 1fr
  }
  .cards, .portfolio {
    grid-template-columns: repeat(2, 1fr)
  }
  .ribbon {
    grid-template-columns: repeat(3, 1fr);
    bottom: -80px
  }
  .section {
    padding: 90px 0
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr
  }
}
@media(max-width:620px) {
  .container {
    width: min(100% - 24px, var(--max))
  }
  .topbar {
    display: none
  }
  .nav {
    height: 74px
  }
  .brand img {
    width: 190px;
    height: 66px
  }
  .navlinks {
    top: 74px
  }
  .mega {
    grid-template-columns: 1fr
  }
  .hero {
    min-height: 650px
  }
  .hero .container {
    padding: 70px 0 150px
  }
  .hero h1 {
    font-size: 3.1rem
  }
  .ribbon {
    grid-template-columns: repeat(2, 1fr);
    bottom: -122px
  }
  .section {
    padding: 80px 0
  }
  .grid2 {
    gap: 30px
  }
  .collage {
    grid-template-columns: 1fr
  }
  .collage .main, .collage img:not(.main) {
    height: 260px
  }
  .cards, .portfolio {
    grid-template-columns: 1fr
  }
  .form {
    grid-template-columns: 1fr
  }
  .form .full {
    grid-column: auto
  }
  .footer-grid {
    grid-template-columns: 1fr
  }
  .service-detail img {
    height: 300px
  }
}