/* =========================================================

   1. ROOT VARIABLES

========================================================= */
:root{

  --primary:#0000FF;

  --primary-dark:#0000cc;

  --secondary:#D9DDDC;

  --accent:#ffcc00;

  --text:#1a1a1a;

  --bg:#f7f7f7;

  --white:#ffffff;



  --radius:8px;

  --shadow-soft:0 10px 30px rgba(0,0,0,0.06);

  --shadow-hover:0 14px 40px rgba(0,0,0,0.10);

}

/* =========================================================

   2. RESET & BASE

========================================================= */

*{

  margin:0;

  padding:0;

  box-sizing:border-box;
}

body{

  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  color:var(--text);

  background:var(--white);

  line-height:1.65;

  -webkit-font-smoothing:antialiased;

}



img{

  width:100%;

  display:block;

}

a{

  text-decoration:none;

  color:inherit;

}

ul{

  padding-left:20px;

}

.container{

  width:100%;

  max-width:1100px;

  margin:auto;

  padding:0 24px;

}

/* =========================================================

   3. TYPOGRAPHY SYSTEM

========================================================= */

h1{

  font-size:48px;

  font-weight:700;

  letter-spacing:-0.5px;

  line-height:1.1;

  margin-bottom:20px;

}

h2{

  font-size:34px;

  font-weight:700;

  letter-spacing:-0.3px;

  margin-bottom:24px;

}

h3{

  font-size:20px;

  font-weight:600;

  margin-bottom:12px;

}

p{

  margin-bottom:18px;

  font-size:16px;

  color:#444;

}

/* =========================================================

   4. NAVIGATION (SILO STRUCTURE)

========================================================= */

.nav{

  background:var(--white);

  border-bottom:1px solid rgba(0,0,0,0.06);

  position:sticky;

  top:0;

  z-index:999;

}

.nav-inner{

  display:flex;

  justify-content:space-between;

  align-items:center;

  height:80px;

}


.logo{

  font-weight:700;

  font-size:20px;

}


.nav-links{

  list-style:none;

  display:flex;

  align-items:center;

  gap:32px;

}

.nav-links li{

  position:relative;

}

.nav-links a{

  font-weight:500;

  transition:0.2s ease;

}

.nav-links a:hover{

  color:var(--primary);

}


/* Dropdown */

.has-dropdown:hover .dropdown{

  opacity:1;

  visibility:visible;

  transform:translateY(0);

}



.dropdown{

  position:absolute;

  top:120%;

  left:0;

  background:var(--white);

  box-shadow:var(--shadow-soft);

  border-radius:var(--radius);

  padding:16px 0;

  list-style:none;

  min-width:240px;



  opacity:0;

  visibility:hidden;

  transform:translateY(10px);

  transition:0.25s ease;

}

.dropdown li{

  padding:8px 20px;

}



.dropdown a{

  font-weight:500;

  display:block;

}



/* CTA in nav */

.nav-cta{

  background:var(--primary);

  color:var(--white);

  padding:10px 18px;

  border-radius:var(--radius);

}


.nav-cta:hover{

  background:var(--primary-dark);

}

/* =========================================================

   5. HERO

========================================================= */
.hero{

  position:relative;

  height:85vh;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  color:var(--white);

  overflow:hidden;

}

.hero img{

  position:absolute;

  top:0;

  left:0;

  height:100%;

  object-fit:cover;

  z-index:-2;

}



.hero::after{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.6));

  z-index:-1;

}

.hero-content{

  max-width:800px;

  padding:0 24px;

}

.hero p{

  color:#e5e5e5;

  font-size:18px;

}

/* =========================================================

   6. BUTTON SYSTEM

========================================================= */

.btn{

  display:inline-block;

  margin-top:20px;

  padding:14px 28px;

  background:var(--accent);

  color:#000;

  font-weight:600;

  border-radius:var(--radius);

  transition:0.25s ease;

}



.btn:hover{

  transform:translateY(-3px);

  box-shadow:var(--shadow-hover);

}

/* =========================================================

   7. SECTION SYSTEM

========================================================= */

.section{

  padding:100px 0;

}


.section-light{

  background:var(--white);

}

.section-grey{

  background:var(--bg);

}


/* INTERNAL LINKING SYSTEM" */
.internal-links{
color: #0000FF;
font-weight: 600;

}



/* Areas We Cover Page */
.areas-we-cover h2 {
  text-align: center;
  margin-bottom: 60px;
}

.area-card ul {
  margin-top: 12px;
  margin-bottom: 18px;
  padding-left: 18px;
}

.area-card ul li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.area-card .internal-links a {
  color: var(--primary);
  font-weight: 600;
  display: inline-block;
  margin-top: 10px;
}

.area-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  transition: 0.3s ease;
}



/* =========================================================

   8. GRID & CARD SYSTEM (Premium Feel)

========================================================= */

.grid-3{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

  gap:40px;

  margin-top:40px;

}


.card{

  background:var(--white);

  padding:40px;

  border-radius:var(--radius);

  box-shadow:var(--shadow-soft);

  transition:0.3s ease;

}



.card:hover{

  transform:translateY(-6px);

  box-shadow:var(--shadow-hover);

}



/* =========================================================
   13. MAIN PSGE SERVICE SELECTOR (Internal Silo Reinforcement)
========================================================= */

.services-selector{
  margin-top:40px;
}

.service-card{
  display:block;
  color:var(--text);
}

.service-card:hover h3{
  color:var(--primary);
}


/* =========================================================

   9. FAQ

========================================================= */

.faq{

  margin-top:40px;

}

.faq-item{

  margin-bottom:32px;

  padding-bottom:24px;

  border-bottom:1px solid rgba(0,0,0,0.08);

}

/* =========================================================

   10. FINAL CTA (Full Bleed Luxury)

========================================================= */

.final-cta{

  background:var(--primary);

  color:var(--white);

  padding:120px 0;

  text-align:center;

}

.final-cta h2{

  font-size:36px;

  margin-bottom:30px;

  color:var(--white);

}

.final-cta .btn{

  background:var(--accent);

  color:#000;

}


/* =========================================================

   11. FOOTER

========================================================= */

.footer{

  background:#0f0f0f;

  color:#aaa;

  text-align:center;

  padding:30px 0;

  font-size:14px;

}



/* =========================================================

   12. MOBILE UX

========================================================= */



@media(max-width:768px){

  h1{

    font-size:32px;

  }

  h2{

    font-size:26px;

  }

  .hero{

    height:70vh;

  }

  .nav-links{

    display:none;

  }

}