/* styles.css — S4 Engineering placeholder */
/* Color system */
:root{
  --brand:#2C2E80;       /* main color */
  --ink:#1b1d24;         /* body text */
  --muted:#6b7280;       /* secondary text */
  --line:#e6e8ef;        /* borders */
  --bg:#ffffff;          /* page background */
  --card:#f7f8fc;        /* subtle panels */
  --radius:16px;
  --shadow:0 10px 24px rgba(17, 24, 39, .07);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

/* Containers */
.container{width:min(1100px, 92vw); margin-inline:auto}

/* Header */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit}
.brand img{height:44px; width:auto; display:block}
.brand-text{display:flex; flex-direction:column}
.brand-name{
  font-family:"Poppins", sans-serif; font-weight:700; letter-spacing:.25px;
  color:var(--brand); font-size:1.25rem;
}
.brand-sub{font-size:.9rem; color:var(--muted)}
.nav{display:flex; gap:18px; flex-wrap:wrap; padding-left: 20px;}
.nav a{color:var(--brand); text-decoration:none; font-weight:600; font-size:1.5rem; line-height: 1rem;}
.nav a:hover{text-decoration:underline}

/* Hero */
.hero{padding:44px 0 12px}
.hero h1{
  font-family:"Poppins", sans-serif;
  color:var(--brand);
  font-size: clamp(1.4rem, 4.4vw, 2.5rem);
  line-height:1.15; margin:0 0 10px;
}
.hero .lede{max-width:880px; font-size: clamp(1rem, 2.2vw, 1.15rem); color:var(--ink)}

/* Sections */
.section{padding:42px 0}
.section-head h2{
  font-family:"Poppins", sans-serif;
  color:var(--brand); margin:0 0 .2rem; font-size: clamp(1.4rem, 3.6vw, 2rem);
}
.section-head p{margin:.2rem 0 1.2rem; color:var(--muted)}

.two-col{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:26px;
}
.bullets{margin:0; padding-left:18px}
.bullets li{margin:.35rem 0}

/* Grid cards */
.grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(12, 1fr);
}
.card{
  grid-column: span 4;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}
.card h3{
  margin:.2rem 0 .5rem;
  color:var(--brand);
  font-family:"Poppins", sans-serif;
}

/* Case study */
.case-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-bottom:12px;
}
.case-figure{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px; box-shadow:var(--shadow)
}
.case-figure img{width:100%; height:auto; border-radius:10px}
.case-figure figcaption{margin-top:8px; color:var(--muted); font-size:.95rem}

.outcomes{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.outcome{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow)
}
.outcome h3{
  margin:.1rem 0 .35rem; color:var(--brand); font-family:"Poppins", sans-serif;
}

/* Footer */
.footer{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 0 34px; border-top:1px solid var(--line); margin-top:10px;
}
.footer .muted{color:var(--muted); margin:0}

/* Responsive */
@media (max-width: 980px){
  .two-col{grid-template-columns: 1fr}
  .grid .card{grid-column: span 6}
}
@media (max-width: 680px){
  .nav{gap:12px}
  .grid{grid-template-columns: 1fr}
  .grid .card{grid-column: 1}
  .case-grid{grid-template-columns: 1fr}
  .outcomes{grid-template-columns: 1fr}
}