:root{
  --brand:#083049;
  --accent:#ffd21f;
  --muted:#6b7280;
  --card-border:#e6eef5;
}

/* Base reset + fonts */
*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,Arial,Helvetica,sans-serif}
body{background:#f8fafc;color:var(--brand);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Layout container */
.container{max-width:1100px;margin:0 auto;padding:18px}

/* Header */
.header{background:var(--brand);padding:12px 0}

/* Hero: common styles */
.hero{
  padding:60px 0;
  color:#fff;
  display:flex;
  align-items:center;
  background-size:cover;
  background-position:center;
  /* ensure text sits above background */
  position:relative;
  z-index:0;
}

/* Distinguish home vs other pages */
.hero.home-hero{min-height:900px}   /* Desktop home */
.hero.page-hero{min-height:600px}   /* Desktop other pages */

/* Ensure overlay text is readable if you add overlay elements later */
.hero::before {
  content: "";
  position: absolute;
  left:0; right:0; top:0; bottom:0;
  z-index:0;
  pointer-events: none;
}

/* Cards / Panels (legacy) */
.cards{display:flex;gap:16px;flex-wrap:wrap}
.card{background:#fff;padding:14px;border-radius:8px;border:1px solid var(--card-border);flex:1;min-width:220px}

/* Buttons */
.btn{display:inline-block;padding:10px 14px;border-radius:8px;text-decoration:none;background:var(--accent);color:var(--brand);font-weight:700}

/* Footer */
.footer{background:#0b2b3b;color:#fff;padding:18px;margin-top:24px;text-align:center}

/* Footer bottom layout fix (keeps footer at bottom if content short) */
html, body {height:100%}
body {display:flex;flex-direction:column;min-height:100vh}
.site-main {flex:1 0 auto}
.footer {margin-top:auto}

/* ---------------------
   Services grid styles
   --------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.service-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 18px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(12,44,68,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 12px;
  display: block;
}

.service-card h3 {
  margin: 6px 0 8px;
  color: var(--brand);
  font-size: 18px;
}

.service-card p.lead {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Small hover lift */
.service-card:hover {
  transform: translateY(-4px);
  transition: transform 180ms ease;
}

/* Mobile tweaks for services */
@media (max-width: 767px) {
  .service-card { padding: 14px; }
  .service-icon { width: 40px; height: 40px; margin-bottom: 10px; }
}

/* ---------------------
   Responsive hero sizing
   --------------------- */
/* Tablet */
@media (max-width:1199px){
  .hero.home-hero{min-height:600px}
  .hero.page-hero{min-height:400px}
  .hero{padding:48px 0}
  .container{padding:16px}
}

/* Mobile */
@media (max-width:767px){
  .hero.home-hero{min-height:400px}
  .hero.page-hero{min-height:300px}
  .hero{padding:28px 0}
  .container{padding:12px}
  .card{min-width:100%}
  .header .container{padding-left:12px;padding-right:12px}
  .hero .container .content h1{font-size:22px;line-height:1.1}
  .hero .container .content p{font-size:14px}
}

/* Small tweak: ensure text contrast over image */
.hero .container .content h1{margin-bottom:8px}
.hero .container .content p{margin-bottom:6px;color:#f1f5f9}

/* Utility */
a{color:inherit}