/* =====================================================
   Horizon MEP — Base CSS
   Shared design system for all pages
   Mobile-first, US AEC professional standard
===================================================== */

/* --------------------
   CSS Variables
-------------------- */
:root{
  --black:#000000;
  --blue:#3533cd;
  --white:#ffffff;
  --orange:#f2701e;
  --gray:#d3d8e3;
  --bg:#f6f8fc;

  --grad-main: linear-gradient(90deg,#000000 0%,#3533cd 70%);
  --grad-accent: linear-gradient(90deg,#3533cd 0%,#f2701e 100%);
}

/* --------------------
   Reset & Base
-------------------- */
*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
}

body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,
    "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:#0b1a2b;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

a{
  text-decoration:none;
  color:inherit;
}

/* --------------------
   Layout Containers
-------------------- */
section{
  padding:84px 20px;
}

.section-wrap,
.wrap{
  max-width:1200px;
  margin:auto;
}

/* --------------------
   Typography
-------------------- */
h1,h2,h3,h4{
  font-family:Poppins,sans-serif;
  margin:0;
}

.section-title{
  font-size:32px;
  margin-bottom:12px;
}

.section-sub{
  color:#475569;
  max-width:760px;
}

/* --------------------
   Header / Navigation
-------------------- */
header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(0,0,0,0.9);
  backdrop-filter: blur(8px);
}

.nav{
  max-width:1200px;
  margin:auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:white;
  font-weight:700;
}

.brand img{ height:40px; }

.nav-links{
  display:flex;
  gap:22px;
  align-items:center;
  font-weight:500;
  color:#e5e7eb;
}

/* Gradient hover only for normal nav links */
.nav-links a:not(.nav-cta):hover{
  background: linear-gradient(90deg, #3533cd, #f2701e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Keep CTA button intact */
.nav-cta:hover{
  background: linear-gradient(90deg, #3533cd, #f2701e);
  color:#ffffff !important;
  -webkit-text-fill-color: unset;
}

.nav-cta{
  padding:10px 16px;
  border-radius:10px;
  background:var(--grad-accent);
  color:white;
  font-weight:600;
}

/* Mobile Nav */
#menu-toggle{ display:none; }

.menu-icon{
  display:none;
  font-size:26px;
  color:white;
  cursor:pointer;
}

/* --------------------
   Buttons
-------------------- */
.btn-primary{
  background:var(--grad-accent);
  color:white;
  padding:14px 22px;
  border-radius:12px;
  font-weight:600;
}

.btn-secondary{
  border:1.5px solid rgba(255,255,255,0.25);
  color:white;
  padding:14px 22px;
  border-radius:12px;
}

/* --------------------
   Cards & Grids
-------------------- */
.services{
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.service-card{
  background:white;
  border-radius:18px;
  padding:28px 24px;
  box-shadow:0 10px 30px rgba(15,23,42,0.06);
  transition:transform .25s ease, box-shadow .25s ease;
}

.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(15,23,42,0.12);
}

.service-icon{
  width:56px;
  height:56px;
  border-radius:14px;
  background:var(--grad-main);
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:22px;
  margin-bottom:16px;
}

.grid,
.panel,
.team,
.discipline,
.process{
  display:grid;
  gap:32px;
}

/* --------------------
   CTA Section
-------------------- */
.cta{
  background:var(--grad-accent);
  color:white;
  text-align:center;
  padding:84px 20px;
}

.cta h2{
  font-size:clamp(28px,4vw,36px);
  margin-bottom:16px;
}

/* --------------------
   Footer
-------------------- */
footer{
  background:#020617;
  color:#cbd5f5;
  padding:36px 20px;
}

.footer-wrap{
  max-width:1200px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
}

footer a:hover{
  background: linear-gradient(90deg, #3533cd, #f2701e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer-social{
  display:flex;
  flex-direction:column;
  align-items:flex-start;   /* aligns under Connect text */
  gap:10px;
}

.social-icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:8px;
  color:#cbd5f5;
}

/* SVG size */
.social-icon{
  width:22px;
  height:22px;
  fill:currentColor;
}

/* Hover effect */
.social-icon-link:hover{
  background: linear-gradient(90deg, #3533cd, #f2701e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------
   Responsive Rules
-------------------- */
@media (max-width:1024px){
  .services{
    grid-template-columns:repeat(2,1fr);
  }

  .grid,
  .panel,
  .team,
  .discipline,
  .process{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:768px){
  .menu-icon{ display:block; }

  .nav-links{
    position:absolute;
    top:64px;
    right:20px;
    background:#020617;
    border-radius:14px;
    flex-direction:column;
    padding:18px;
    display:none;
    width:220px;
  }

  #menu-toggle:checked + .menu-icon + .nav-links{
    display:flex;
  }

  section{
    padding:64px 16px;
  }
}

@media (max-width:520px){
  .services{
    grid-template-columns:1fr;
  }
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 32px;
  margin-top: 60px;
}

.project-card {
  background: #ffffff;
  padding: 32px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

.project-card h2 {
  font-size: 26px;
}

/* Reduce middle section font size */
.project-details {
  font-size: 15px;          /* slightly smaller */
  line-height: 1.65;        /* improve readability */
  margin: 18px 0 22px;
  color: #2d3748;           /* softer than pure black */
}

/* Labels (Project Type, Location, etc.) */
.project-details strong {
  font-weight: 600;
  color: #111827;           /* darker for hierarchy */
}

/* Improve spacing between rows */
.project-details div {
  margin-bottom: 12px;
}

/* Optional: slightly reduce meta text too */
.project-card .meta {
  font-size: 14px;
  opacity: 0.85;
}

.project-card .btn-primary {
  margin-top: 20px;
  align-self: flex-start;
}