@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&family=Bebas+Neue&display=swap');

/* =========================================================
   ROOT COLORS
========================================================= */
:root {

  --ivory:      #f7fbff;
  --cream:      #eef5fc;
  --cream-dark: #dce8f5;

  --warm-100:   #cfe0f2;
  --warm-200:   #aac7e6;

  --warm-400:   #5f7fa3;
  --warm-600:   #355070;

  --charcoal:   #10233b;
  --charcoal-2: #18314f;

  --amber:      #1d72d8;
  --amber-light:#4294ff;
  --amber-bg:   #edf5ff;

  --white:      #ffffff;

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-accent: 'Bebas Neue', sans-serif;

  --shadow-md: 0 10px 30px rgba(0,0,0,0.08);

}

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

body{
  font-family:var(--font-body);
  background:var(--ivory);
  color:var(--charcoal);
  overflow-x:hidden;
}

a{
  text-decoration:none;
}

/* =========================================================
   NAVBAR
========================================================= */
.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:78px;

  background:rgba(255,255,255,0.92);

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 6%;

  z-index:999;

  backdrop-filter:blur(14px);

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

.nav-logo{
  display:flex;
  align-items:center;
  gap:12px;
}

.nav-logo-icon{
  width:44px;
  height:44px;

  background:var(--amber);

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--white);

  font-weight:700;

  border-radius:10px;
}

.brand{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:700;
}

.tagline{
  font-size:0.7rem;
  color:var(--amber);
  letter-spacing:2px;
  text-transform:uppercase;
}

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative;

  height:100vh;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;

  background-size:cover;
  background-position:center;
}

.hero-overlay{
  position:absolute;
  inset:0;

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

.hero-content{
  position:relative;
  z-index:2;

  text-align:center;

  max-width:800px;

  padding:0 20px;
}

.hero-eyebrow{
  color:#ffffff;

  font-family:var(--font-accent);

  letter-spacing:5px;

  font-size:1.3rem;

  margin-bottom:20px;
}

.hero-title{
  color:#ffffff;

  font-size:4rem;

  font-family:var(--font-display);

  margin-bottom:20px;
}

.hero-divider{
  width:70px;
  height:3px;

  background:var(--amber-light);

  margin:auto;
  margin-bottom:20px;
}

.hero-sub{
  color:#ffffff;

  font-size:1.1rem;

  line-height:1.8;
}

/* =========================================================
   SECTION
========================================================= */
section{
  padding:90px 6%;
}

.section-label{
  color:var(--amber);

  font-size:0.8rem;

  letter-spacing:4px;

  text-transform:uppercase;

  margin-bottom:10px;

  display:block;
}

.section-title{
  font-family:var(--font-display);

  font-size:3rem;

  margin-bottom:10px;
}

.gold-line{
  width:60px;
  height:3px;

  background:var(--amber);

  margin:20px 0;
}

/* =========================================================
   ENVIRONMENT SECTION
========================================================= */
.env-clearance{
  background:var(--white);

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:60px;

  align-items:center;
}

.project-location{
  background:var(--cream);

  border-left:4px solid var(--amber);

  padding:25px;

  border-radius:10px;

  box-shadow:var(--shadow-md);
}

.location-header{
  display:flex;
  align-items:center;
  gap:10px;

  color:var(--amber);

  margin-bottom:18px;
}

.location-label{
  text-transform:uppercase;

  font-size:0.75rem;

  font-weight:700;

  letter-spacing:2px;
}

.location-row{
  line-height:2;
}

.loc-val{
  color:var(--charcoal);

  font-size:1rem;

  font-weight:600;
}

/* =========================================================
   DOCUMENT CARD
========================================================= */
.env-doc-card{
  background:var(--ivory);

  padding:40px;

  border-radius:14px;

  box-shadow:var(--shadow-md);
}

.doc-header{
  display:flex;
  gap:18px;

  margin-bottom:30px;
}

.doc-icon{
  width:55px;
  height:55px;

  background:var(--amber);

  color:#fff;

  border-radius:10px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:1.4rem;
}

.doc-meta h3{
  font-size:1.3rem;

  margin-bottom:8px;
}

.doc-meta p{
  color:var(--warm-600);
}

/* =========================================================
   BUTTON
========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;

  background:var(--amber);

  color:#fff;

  padding:15px 28px;

  border-radius:8px;

  font-weight:700;

  transition:0.3s;
}

.btn:hover{
  background:var(--amber-light);

  transform:translateY(-3px);
}

/* =========================================================
   FOOTER
========================================================= */
footer{
  background:var(--charcoal);

  padding:25px 6%;
}

.footer-bottom{
  text-align:center;
}

.footer-bottom p{
  color:#c9d8ea;

  font-size:0.85rem;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width:900px){

  .env-clearance{
    grid-template-columns:1fr;
  }

  .hero-title{
    font-size:2.7rem;
  }

}

@media(max-width:600px){

  .hero-title{
    font-size:2.2rem;
  }

  .section-title{
    font-size:2rem;
  }

}