:root{
  --ink:#0b1320;
  --muted:#5d6675;
  --accent:#0a84ff;
  --bg:#ffffff;
  --soft:#f2f4f8;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
}
.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
}
/* NAVBAR */
.navbar{
  position:fixed; top:0; left:0; right:0;
  background:#fff; z-index:1000;
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(6px);
}
.navbar .inner{display:flex; align-items:center; gap:24px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; font-weight:700;}
.brand img{height:36px; width:auto}
.nav{margin-left:auto; display:flex; gap:22px;}
.nav a{
  text-decoration:none; color:var(--ink); font-weight:600; font-size:14px; opacity:.85;
  padding:8px 10px; border-radius:10px;
}
.nav a:hover, .nav a.active{ background:var(--soft); opacity:1; }
section{scroll-margin-top:80px;}
.spacer{height:76px;} /* offset for fixed navbar */

/* HERO (HOME) */
#home{padding:48px 0 28px}
.hero-top{display:grid; grid-template-columns:1.7fr 1fr; gap:20px; align-items:center; margin-top:8px;}
.hero-title{
  font-size:54px; font-weight:800; letter-spacing:.3px; line-height:1.05; margin:0;
}
.hero-logo{justify-self:end; max-width:260px;}
.hero-mid{display:grid; grid-template-columns:1fr 1fr; gap:0; margin:26px 0 6px;}
.hero-mid img{display:block; width:100%; height:420px; object-fit:cover;}
/* Two columns (about/services) */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:26px 0;}
.kicker{font-weight:900; letter-spacing:.12em; color:var(--muted); font-size:13px; margin-bottom:6px}
.h2{font-size:28px; font-weight:900; margin:0 0 12px}
p{color:#334155}
ul{margin:0; padding-left:20px}
li{margin:6px 0}
/* Mission */
#mission{padding:12px 0 8px}
.strip{
  margin-top:18px; background:#f3f4f6; padding:8px 0;
}
.strip .row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.strip img{width:100%; height:110px; object-fit:cover; display:block}

/* Footer */
footer{
  padding:16px 0 28px; text-align:center; color:#1f2937; font-weight:600;
}

/* Responsive */
@media (max-width: 900px){
  .hero-top{grid-template-columns:1fr; text-align:left}
  .hero-logo{justify-self:start; margin-top:8px; max-width:200px;}
  .hero-title{font-size:42px}
  .hero-mid img{height:300px}
  .two-col{grid-template-columns:1fr; gap:26px;}
  .strip .row{grid-template-columns:repeat(2,1fr)}
}

/* --- Responsive Navbar (Hamburger) --- */
.menu-toggle{
  display:none; margin-left:auto; border:1px solid var(--border); background:#fff;
  border-radius:10px; padding:8px 10px; cursor:pointer; align-items:center; gap:8px;
}
.menu-toggle .bar{width:20px; height:2px; background:var(--ink); display:block; position:relative}
.menu-toggle .bar::before, .menu-toggle .bar::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink);
}
.menu-toggle .bar::before{ top:-6px }
.menu-toggle .bar::after{ top:6px }
.menu-toggle:focus{ outline:2px solid var(--accent); outline-offset:2px }

@media (max-width: 900px){
  .nav{ position:fixed; top:64px; left:16px; right:16px; background:#fff;
        border:1px solid var(--border); border-radius:12px; padding:10px; flex-direction:column; gap:6px;
        box-shadow:0 10px 30px rgba(0,0,0,.08);
        display:flex; visibility:hidden; opacity:0; pointer-events:none; transform: translateY(-12px);
        transition: transform .25s ease, opacity .2s ease, visibility .2s;
        will-change: transform, opacity;
      }
  .nav.open{ visibility:visible; opacity:1; pointer-events:auto; transform: translateY(0); }
  .menu-toggle{ display:inline-flex; }
  .navbar .inner{ gap:12px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .nav{ transition:none !important; }
}

/* Heading link style */
.link-heading{ color: inherit; text-decoration: none; border-bottom: 2px solid transparent; padding-bottom:2px; }
.link-heading:hover{ border-color: var(--ink); }

/* Alerts */
.alert{ padding:12px 14px; border-radius:12px; margin:10px 0 18px; border:1px solid var(--border); font-weight:600 }
.alert-success{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0 }
.alert-error{ background:#fef2f2; color:#991b1b; border-color:#fecaca }

/* Full-bleed helper for edge-to-edge sections */
.full-bleed{
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
}
/* Split hero images: two sides equal height, center seam aligned */
.hero-split{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  margin:26px 0 6px;
  height:min(56vh, 520px);
  min-height:320px;
}
.hero-split > figure{ position:relative; overflow:hidden; margin:0; }
.hero-split img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

@media (max-width: 900px){
  .hero-split{ grid-template-columns:1fr; height:auto; }
  .hero-split > figure{ height:56vw; min-height:240px; }
  .hero-split img{ position:absolute; }
}

/* Exact split hero — two images, 50% each, full viewport width, seamless center */
.hero-split{
  display:flex; gap:0; align-items:stretch; justify-content:stretch;
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
  height:clamp(360px, 58vh, 560px);
  line-height:0; /* avoid stray gaps */
  overflow:hidden;
}
.hero-split img{
  display:block;
  width:50%;
  height:100%;
  object-fit:cover;
  flex:0 0 50%;
}
/* Reduce rare 1px seam on some browsers */
.hero-split img.right{ flex-basis:calc(50% + 0.5px); }

@media (max-width: 900px){
  .hero-split{ flex-direction:column; height:auto; }
  .hero-split img{ width:100%; height:auto; flex:0 0 auto; }
}

/* --- Hero split override to prevent overlap --- */
.hero-split img{ position: static !important; inset: auto !important; }


/* Additional styles for improved sections */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.service-item {
  background: var(--soft);
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.service-item h3 {
  color: var(--accent);
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.mission-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.value-item {
  text-align: center;
  padding: 1.5rem;
}

.value-item h3 {
  color: var(--accent);
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 700;
}

/* Section spacing improvements */
section {
  padding: 4rem 0;
}

section:nth-child(even) {
  background: var(--soft);
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Ensure sections have proper spacing for navigation */
section[id] {
  scroll-margin-top: 80px;
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .mission-values {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  section {
    padding: 2rem 0;
  }
}