/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --brand:#82a6a7;         /* teal from logo */
  --brand-dark:#4e7c98;    /* darker accent */
  --brand-light:#b6d0b7;   /* light complement */
  --text:#222;
  --bg:#f7fafc;
}
html,body{height:100%;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text)}
/* gradient background from white to brand green at bottom */
body{line-height:1.5;background:#fff}

.container{width:min(1100px,94%);margin:0 auto;padding:2rem 0}

.site-header{
  background:#fff;                    /* white header */
  border-bottom:1px solid var(--brand); /* use brand as separator */
  height:1.125in;                      /* a bit taller (1/8" more) */
}
/* remove padding and center content vertically */
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:0 0.5rem;height:100%}
.logo{font-size:1.25rem;color:#fff;letter-spacing:.5px;text-decoration:none}
.logo-img{height:1in;display:block}

.nav-list{list-style:none;display:flex;gap:1rem}
.nav-list a{text-decoration:none;color:var(--brand-dark);padding:.5rem}
.nav{display:flex;justify-content:space-between;align-items:center}
#menu-toggle{display:none}

.hero{width:100%;padding:4rem 0;text-align:center;background:linear-gradient(180deg, var(--brand-light), #fff)}
.hero h2{font-size:1.75rem;margin-bottom:.5rem;color:var(--brand-dark)}
.hero p{max-width:700px;margin:.5rem auto 1rem;color:#475569}

.btn{display:inline-block;background:#d1d5db;color:#000;padding:0.9rem 1rem;border:1px solid #000;border-radius:6px;text-decoration:none;width:1.5in;margin:0 auto}
.btn:disabled{color:#9ca3af}

#contact{display:none}
#nav-list a[href="#contact"]{display:none}

main{background:linear-gradient(to bottom, #fff 0, #fff calc(100% - 4in), var(--brand) 100%)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.card{background:#fff;padding:1rem;border-radius:8px;border:1px solid #e6edf2}

.site-footer{padding:0.25in 0;text-align:center;color:#334155;background:var(--brand);border-top:none}

form{display:grid;gap:.75rem;max-width:560px}
form label{display:flex;flex-direction:column;font-size:.95rem;color:#334155}
input,textarea{padding:.5rem;border:1px solid #cbd5e1;border-radius:6px}
.status{margin-top:.5rem;color:green}

/* ensure paragraphs in our new about/technology sections are comfortable */
#technology p,
#about p {margin-top:.75rem;line-height:1.6;}

.nav-list{list-style:none;display:flex;gap:1rem}
.nav-list a{text-decoration:none;color:var(--brand-dark);padding:.5rem}
.nav{display:flex;justify-content:space-between;align-items:center}
#menu-toggle{display:none}

@media (max-width:700px){
  #menu-toggle{display:inline-block;background:var(--brand-dark);color:#fff;border:0;padding:.4rem .6rem;border-radius:6px;position:absolute;top:50%;right:0;transform:translateY(-50%)}
  .nav-list{display:none;flex-direction:column;width:100%;margin-top:.5rem}
  .site-header .container{position:relative}
}