/* ===========================================================
   style.css — Minimalist Black & White
   Mobile-first, accessible, responsive
   =========================================================== */

/* -----------------------
   Root variables and reset
   ----------------------- */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

:root{
  --bg: #ffffff;
  --fg: #000000;
  --muted: #555555;
  --max-width: 1100px;
  --radius: 8px;
  --gap: 20px;
  --container-padding: 20px;
  --btn-pad: 12px 18px;
  --transition: 180ms ease;
}

*{box-sizing:border-box;}
html,body,#site{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}

/* Utility */
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--container-padding);
}
.visually-hidden{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap; /* added line */
}

/* -----------------------
   Header & nav
   ----------------------- */
.site-header{
  position:sticky;
  top:0;
  background:var(--bg);
  z-index:100;
  border-bottom:1px solid var(--fg);
}
.header-inner{
  display:flex;
  gap:var(--gap);
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}

/* Brand */
.brand{
  font-weight:700;
  text-decoration:none;
  color:var(--fg);
  font-size:1.1rem;
  letter-spacing:0.6px;
}

/* Nav */
.nav{
  display:flex;
}
.nav-list{
  list-style:none;
  display:flex;
  gap:18px;
  margin:0;
  padding:0;
  align-items:center;
}
.nav-link{
  color:var(--fg);
  text-decoration:none;
  padding:8px 6px;
  border-radius:4px;
  transition:color var(--transition), background var(--transition);
}
.nav-link:focus, .nav-link:hover{
  background:transparent;
  color:var(--muted);
  outline:none;
}

/* Mobile toggle */
.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--fg);
  padding:8px;
  border-radius:6px;
}
.hamburger{
  display:block;
  width:20px;
  height:2px;
  background:var(--fg);
  position:relative;
}
.hamburger::before,
.hamburger::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:var(--fg);
}
.hamburger::before{ top:-6px; }
.hamburger::after{ top:6px; }

/* -----------------------
   Hero
----------------------- */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90vh; /* full screen height */
  text-align: center;
  color: var(--bg);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('1.jpeg'); /* replace with your image */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0 1rem; /* small horizontal padding for mobile */
}

.hero-inner {
  max-width: 920px;
  margin: 0 auto;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.hero-sub {
  color: var(--bg);
  opacity: 0.85;
  margin: 0 auto 1.5rem;
  max-width: 60ch;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:var(--btn-pad);
  border-radius:6px;
  background:var(--bg);
  color:var(--fg);
  border:2px solid var(--fg);
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
  transition:all var(--transition);
}
.btn:hover, .btn:focus{
  background:transparent;
  color:var(--muted);
  transform:translateY(-2px);
  outline:none;
}
.btn-ghost{
  background:transparent;
  border:2px solid var(--bg);
  color:var(--bg);
}
.btn-sm{
  padding:8px 12px;
  font-size:0.9rem;
}

/* -----------------------
   Sections
   ----------------------- */
section{
  padding:48px 0;
}
h2{
  font-size:1.25rem;
  margin:0 0 12px;
  letter-spacing:0.3px;
}
p{margin:0 0 14px;}

/* About grid */
.about-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:start;
}
.about-stats .stats{
  list-style:none;
  display:flex;
  gap:14px;
  padding:0;
  margin:0;
}
.stats li{display:flex;flex-direction:column;align-items:flex-start;}
.stats strong{font-size:1.1rem;}

  /* -----------------------
   Service & Quality Section
   ----------------------- */
  .service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 5rem;
  }

  .service-text {
    font-size: 1rem;
    line-height: 1.6;
  }

  .service-points {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
  }

  .service-points li {
    margin-bottom: 10px;
  }

  .service-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--fg);
  }

  /* Responsive layout for larger screens */
  @media (min-width: 800px) {
    .service-grid {
      grid-template-columns: 1.2fr 0.8fr;
      gap: 40px;
    }
  }


/* -----------------------
   Projects grid
   ----------------------- */
.project-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.project-card{
  border:1px solid var(--fg);
  padding:16px;
  border-radius:var(--radius);
  background:var(--bg);
  transition:transform var(--transition), box-shadow var(--transition);
}
.project-card:focus, .project-card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

/* project media */
.project-media{margin-bottom:12px;}

.project-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--fg);
}


/* -----------------------
   Plans
   ----------------------- */
.plans-intro{max-width:70ch;margin:0 auto 16px;}
.plan-grid{display:grid;grid-template-columns:1fr;gap:18px;}
.plan-card{
  border:1px solid var(--fg);
  padding:18px;
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.plan-features{margin:0;padding-left:18px;}
.price{font-weight:700;font-size:1.1rem;}

/* -----------------------
   Contact
   ----------------------- */
.contact-form{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:720px;
}
.form-row{display:flex;flex-direction:column;gap:8px;}
.form-row label{font-size:0.9rem;}
.form-row input, .form-row textarea{
  padding:12px;
  border:1px solid var(--fg);
  border-radius:6px;
  font-size:1rem;
  background:transparent;
  color:var(--fg);
}
.form-actions{display:flex;gap:12px;align-items:center;}

/* Footer */
.site-footer{
  border-top:1px solid var(--fg);
  padding:18px 0;
  margin-top:40px;
}
.footer-inner{display:flex;gap:16px;align-items:center;justify-content:space-between;}
.footer-link{color:var(--fg);text-decoration:none;padding:6px;}

/* -----------------------
   Responsive
   ----------------------- */
@media(min-width:700px){
  .about-grid{grid-template-columns:1fr 260px;}
  .project-grid{grid-template-columns:repeat(2,1fr);}
  .plan-grid{grid-template-columns:repeat(3,1fr);}
  .nav-toggle{display:none;}
  .nav{display:block;}
}

@media(max-width:699px){
  .nav{display:none;}
  .nav-toggle{display:inline-block;}
  .hero{padding:100px 0;}
  .footer-inner{flex-direction:column;gap:8px;}
}

/* make larger touch targets */
a.btn, button, .nav-link { touch-action:manipulation; }

/* small print & alignment tweaks */
.alt-contact{margin-top:12px;font-size:0.95rem;}


/* -----------------------
   Dropdown mobile nav
   ----------------------- */
@media (max-width: 699px) {
  .nav {
    display: none;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg);
    border-top: 1px solid var(--fg);
    padding: 10px 0;
    animation: dropdown 0.3s ease forwards;
  }

  .nav.open {
    display: flex;
  }

  .nav-list {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    padding: 0 20px;
  }

  @keyframes dropdown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .nav-toggle {
    display: inline-block;
    position: relative;
    z-index: 200;
  }
}