/* static/styles.css — consolidated stylesheet for all 4 sections */

/* ===== Theme ===== */
:root{
  --bg:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --card:#f8fafc;
  --border:#e5e7eb;
  --brand:#0f766e;           /* teal */
  --brand-contrast:#ecfeff;
  --hero-overlay:#1e2a47;    /* deep indigo overlay */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.55;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.small{font-size:.9rem}
.muted{color:var(--muted)}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* ===== Layout ===== */
.container{max-width:1100px; margin:0 auto; padding:1rem}
.page{padding:2rem 0}
.page-header{margin:1rem 0 1.25rem}
.page-header h1{font-size:clamp(1.8rem,2.5vw + 1rem,3rem); margin:.2rem 0}
.page-subtitle{color:var(--muted); margin:.25rem 0 0}

/* ===== Header / Nav ===== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(160%) blur(6px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:700}
.brand img{height:34px;width:auto}
nav a{margin-left:1rem;font-weight:600}
.btn--outline{border:1px solid var(--brand);border-radius:.6rem;padding:.4rem .7rem}
.small.btn--outline{font-size:.9rem}

/* ===== Buttons ===== */
.btn{display:inline-block;background:var(--brand);color:var(--brand-contrast);padding:.85rem 1.05rem;border-radius:.85rem;font-weight:700;border:1px solid transparent}
.btn:hover{text-decoration:none;filter:brightness(1.05)}
.btn--ghost{background:transparent;border:1px solid var(--brand);color:var(--brand)}

/* ===== Cards & Grids ===== */
.card{background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1rem}
.grid{display:grid; gap:1rem}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* ===== Landing (Bleed Hero) ===== */
.hero-bleed{
  position:relative; isolation:isolate; min-height:58vh;
  background-image:url('https://images.unsplash.com/photo-1551836022-d5d88e9218df?q=80&w=1600&auto=format&fit=crop'); /* replace if desired */
  background-size:cover; background-position:center;
  display:flex; align-items:center;
}
.hero-bleed__overlay{position:absolute; inset:0; background:rgba(30,42,71,.78); z-index:0}
.hero-bleed__content{position:relative; z-index:1; padding:3rem 1rem}
.hero-bleed__content h1{
  color:#fff; margin:0 0 .75rem; max-width:950px;
  font-size:clamp(1.9rem,2.6vw + 1rem,3.2rem);
}
.hero-bleed__content p{color:#dbeafe; max-width:760px; margin:0 0 1.25rem}
.cta-row{display:flex; gap:.8rem; flex-wrap:wrap}

/* ===== About ===== */
.about-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:1rem}
.about-portrait img{border-radius:1rem; border:1px solid var(--border); background:#fff}
.highlights{padding-left:1.1rem}
.highlights li{margin:.45rem 0}
.trust-strip .badges{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; align-items:center}
.trust-strip img{height:56px; width:auto; object-fit:contain}

/* ===== Services ===== */
.service-card{display:grid; gap:.5rem; align-content:start}
.service-icon{
  width:44px; height:44px; border-radius:.75rem; display:grid; place-items:center;
  background:#fff; border:1px solid var(--border); font-size:1.1rem;
}

/* ===== Contact ===== */
.contact-grid{display:grid; grid-template-columns:1.3fr .9fr; gap:1rem}
.contact-form{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
.contact-form label{display:block}
.contact-form input,
.contact-form textarea{
  width:100%; padding:.75rem .85rem; border:1px solid var(--border); border-radius:.65rem; background:#fff; color:var(--text)
}
.contact-form textarea{min-height:170px; resize:vertical}
.contact-form .full{grid-column:1 / -1}
.contact-info .contact-list{list-style:none; padding:0; margin:0; display:grid; gap:.9rem}
.contact-info a{word-break:break-word}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border); margin-top:2rem}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0}
.footer-brand{display:grid}

/* ===== Responsive ===== */
@media (max-width: 960px){
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .hero-bleed{min-height:64vh}
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f19; --text:#e5e7eb; --muted:#94a3b8;
    --card:#0f172a; --border:#1f2937; --brand:#22d3ee; --brand-contrast:#0b0f19;
    --hero-overlay:#0b1224;
  }
  .site-header{background:rgba(11,15,25,.92)}
  .contact-form input, .contact-form textarea{background:#0b0f19; color:var(--text); border-color:var(--border)}
}