:root {
  --black: #111111;
  --dark: #191919;
  --gold: #c5a052;
  --white: #ffffff;
  --light: #f5f4f0;
  --muted: #777777;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--black);
  line-height: 1.7;
}

a { text-decoration: none; color: inherit; }
img { width: 100%; display: block; object-fit: cover; }
section { scroll-margin-top: 85px; }

.header {
  height: 82px;
  padding: 0 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--black);
  color: white;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 2px solid var(--gold);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: Montserrat, sans-serif;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: 2px;
}

.brand img { width: 55px; height: 55px; object-fit: contain; }
.brand small { display: block; color: var(--gold); font-size: 9px; letter-spacing: 1.5px; }

.header nav { display: flex; align-items: center; gap: 27px; }
.header nav a { font-size: 13px; font-weight: 600; transition: .3s; }
.header nav a:hover { color: var(--gold); }
.header nav .nav-cta { background: var(--gold); color: #111; padding: 12px 19px; }
.menu-toggle { display: none; background: none; color: white; border: 0; font-size: 28px; }

.hero {
  min-height: 650px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--black);
  color: white;
}

.hero-content {
  padding: 110px 8% 70px 14%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.eyebrow {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

h1, h2, h3 { font-family: Montserrat, sans-serif; line-height: 1.2; }
.hero h1 { font-size: clamp(38px, 4.5vw, 62px); margin: 25px 0; }
.hero h1 span, h2 span { color: var(--gold); }

.hero-content > p { color: #cccccc; max-width: 490px; font-size: 16px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 15px; margin: 32px 0; }

.btn { display: inline-block; padding: 14px 25px; font-weight: 800; font-size: 13px; transition: .3s; }
.gold { background: var(--gold); color: #111; }
.gold:hover { background: white; transform: translateY(-3px); }
.outline { border: 1px solid #aaa; color: white; }
.outline:hover { border-color: var(--gold); color: var(--gold); }

.hero-trust { display: flex; flex-wrap: wrap; gap: 16px; font-size: 11px; color: #ddd; }
.hero-trust span::first-letter { color: var(--gold); }

.hero-image {
  position: relative;
  background: linear-gradient(0deg, #0008, transparent),
    url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=1400&q=90') center/cover;
  min-height: 500px;
}
.image-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: #111e; padding: 22px 35px;
  border-top: 2px solid var(--gold);
}
.image-caption strong { display: block; color: var(--gold); font-size: 18px; }
.image-caption span { font-size: 11px; letter-spacing: 2px; }

.stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  background: var(--gold); padding: 30px 8%; text-align: center;
}
.stats div { border-right: 1px solid #9e7d39; }
.stats div:last-child { border: 0; }
.stats strong { display: block; font: 800 32px Montserrat; }
.stats span { font-size: 12px; font-weight: 700; }

.section { padding: 100px 8%; }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; align-items: center; }
.section-image { position: relative; }
.section-image img { height: 480px; }
.image-label { background: var(--black); color: var(--gold); padding: 16px; font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.section-content h2, .section-heading h2, .why-section h2, .areas-section h2, .commitment h2, .contact-intro h2 {
  font-size: clamp(30px, 3.4vw, 43px); margin: 17px 0 22px;
}
.section-content p { color: var(--muted); margin-bottom: 17px; font-size: 14px; }
.text-link { display: inline-block; color: #98762f; font-weight: 800; margin-top: 12px; }

.dark-section { padding: 90px 8%; background: var(--dark); color: white; }
.section-heading { text-align: center; margin-bottom: 50px; }
.section-heading > p { color: var(--muted); font-size: 14px; }
.foundation-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; }
.foundation-grid article { padding: 32px; border: 1px solid #494949; border-top: 3px solid var(--gold); }
.big-icon { color: var(--gold); font-size: 42px; }
.foundation-grid h3 { margin: 15px 0; font-size: 19px; }
.foundation-grid p { color: #bbb; font-size: 13px; }

.services-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.service-card { background: var(--light); transition: .3s; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px #0001; }
.service-card img { height: 190px; }
.service-card div { padding: 22px; }
.service-card div > span { color: #a17b2e; font-weight: 900; font-size: 12px; }
.service-card h3 { font-size: 16px; margin: 9px 0; }
.service-card p { color: var(--muted); font-size: 12px; }

.portfolio-section { padding: 90px 8%; background: var(--light); }
.portfolio-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.portfolio-grid article { background: white; overflow: hidden; }
.portfolio-grid img { height: 230px; transition: .5s; }
.portfolio-grid article:hover img { transform: scale(1.05); }
.portfolio-grid h3 { padding: 17px; font-size: 14px; }
.portfolio-note { margin-top: 25px; color: var(--muted); font-size: 12px; }

.process-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; }
.process-grid article { padding: 25px; border: 1px solid #ddd; position: relative; }
.process-grid b { display: inline-grid; place-items: center; background: var(--gold); width: 43px; height: 43px; border-radius: 50%; font-size: 15px; }
.process-grid h3 { margin: 15px 0 8px; font-size: 16px; }
.process-grid p { color: var(--muted); font-size: 13px; }

.why-section { display: grid; grid-template-columns: 1fr 1fr; background: var(--dark); color: white; }
.why-section > div:first-child { padding: 85px 12%; }
.why-section ul { list-style: none; }
.why-section li { padding: 7px 0; font-size: 14px; }
.why-section li::before { content: '✓'; color: var(--gold); font-weight: 900; margin-right: 12px; }
.why-image { min-height: 550px; background: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1200&q=85') center/cover; }

.safety-section { padding: 80px 8%; }
.safety-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 20px; text-align: center; }
.safety-grid div { padding: 22px 10px; border-bottom: 2px solid var(--gold); }
.safety-grid b { font-size: 35px; color: var(--gold); }
.safety-grid h3 { font-size: 12px; margin-top: 10px; }

.areas-section { padding: 80px 10%; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; background: var(--light); align-items: center; }
.areas-section p { color: var(--muted); font-size: 14px; }
.areas-section ul { columns: 2; list-style: none; }
.areas-section li { padding: 9px 0; font-size: 13px; }
.areas-section li::before { content: '⌖'; color: var(--gold); font-size: 18px; margin-right: 9px; }

.commitment { padding: 90px 15%; text-align: center; background: var(--black); color: white; }
.commitment p { color: #ccc; max-width: 750px; margin: 0 auto 25px; font-size: 14px; }
.commitment strong { color: var(--gold); font-size: 13px; letter-spacing: 2px; }

.contact-section { padding: 90px 10%; display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; background: #f5f4f0; }
.contact-intro p { color: var(--muted); margin-bottom: 25px; }
.contact-details { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.contact-details div { border-bottom: 1px solid #ddd; padding-bottom: 15px; }
.contact-details small { display: block; color: #98762f; font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.contact-details strong, .contact-details a, .contact-details p { display: block; font-size: 14px; font-weight: 700; margin-top: 8px; overflow-wrap: anywhere; }

footer { background: var(--black); color: white; padding: 50px 8% 20px; }
.footer-brand strong { display: block; font: 900 32px Montserrat; }
.footer-brand span { color: var(--gold); font-size: 12px; letter-spacing: 2px; }
.footer-brand p { color: #aaa; font-size: 12px; margin: 10px 0 30px; }
.footer-bottom { border-top: 1px solid #444; padding-top: 20px; display: flex; justify-content: space-between; gap: 15px; font-size: 11px; color: #aaa; }

.floating-whatsapp {
  position: fixed; bottom: 22px; right: 22px; z-index: 999;
  width: 55px; height: 55px; display: grid; place-items: center;
  border-radius: 50%; background: #20bd68; color: white; font-size: 27px;
  box-shadow: 0 5px 20px #0004;
}

@media(max-width:1000px) {
  .header { padding: 0 4%; }
  .header nav { gap: 13px; }
  .header nav a { font-size: 11px; }
  .services-grid { grid-template-columns: repeat(2,1fr); }
}

@media(max-width:760px) {
  .header { height: 72px; }
  .brand { font-size: 19px; }
  .brand img { width: 43px; height: 43px; }
  .menu-toggle { display: block; cursor: pointer; }
  .header nav {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    background: #151515; padding: 20px 6%; flex-direction: column;
    align-items: stretch; gap: 0;
  }
  .header nav.active { display: flex; }
  .header nav a { padding: 12px; font-size: 14px; }
  .hero { grid-template-columns: 1fr; }
  .hero-content { padding: 75px 8%; }
  .hero-image { min-height: 350px; }
  .hero-trust { flex-direction: column; }
  .stats { grid-template-columns: repeat(2,1fr); gap: 22px; }
  .stats div:nth-child(2) { border: 0; }
  .about, .why-section, .areas-section, .contact-section { grid-template-columns: 1fr; }
  .section { padding: 70px 7%; }
  .section-image img { height: 330px; }
  .foundation-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2,1fr); }
  .portfolio-grid img { height: 170px; }
  .process-grid { grid-template-columns: repeat(2,1fr); }
  .why-section > div:first-child { padding: 70px 8%; }
  .why-image { min-height: 330px; }
  .safety-grid { grid-template-columns: repeat(2,1fr); }
  .areas-section { padding: 70px 8%; }
  .commitment { padding: 70px 8%; }
  .contact-section { padding: 70px 8%; gap: 40px; }
}

@media(max-width:430px) {
  .services-grid, .portfolio-grid, .process-grid { grid-template-columns: 1fr; }
  .service-card img { height: 220px; }
  .portfolio-grid img { height: 220px; }
  .contact-details { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .areas-section ul { columns: 1; }
}