:root {
  --steel-blue: #335c72;
  --deep-steel: #27485a;
  --charcoal: #1f252b;
  --slate: #46545f;
  --warm-orange: #c55a19;
  --earth-sand: #b68b62;
  --mist: #f4f7f9;
  --white: #ffffff;
  --line: rgba(31,37,43,.12);
  --shadow: 0 20px 45px rgba(9, 18, 26, 0.08);
  --radius: 18px;
  --container: min(1180px, calc(100vw - 2rem));
  --transition: 250ms ease;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1rem; color: #3d4b56; }
h1,h2,h3,h4 { margin: 0 0 1rem; line-height: 1.08; color: var(--charcoal); }
h1,h2,h3,.display { font-family: "Space Grotesk", Inter, sans-serif; letter-spacing: -.03em; }
.container { width: var(--container); margin: 0 auto; }
.section { padding: 5.5rem 0; }
.section-sm { padding: 3.5rem 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; text-transform: uppercase;
  letter-spacing: .16em; font-size: .78rem; font-weight: 700; color: var(--steel-blue);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; width: 36px; height: 2px; background: linear-gradient(90deg, var(--warm-orange), transparent);
}
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  border-radius: 999px; padding: .95rem 1.35rem; font-weight: 700; transition: var(--transition);
  border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: linear-gradient(135deg, var(--warm-orange), #e17734); color: var(--white); box-shadow: 0 14px 30px rgba(197, 90, 25, .22); }
.btn-primary:hover { transform: translateY(-2px); filter: saturate(1.06); }
.btn-secondary { background: rgba(255,255,255,.14); color: var(--white); border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.btn-secondary:hover { background: rgba(255,255,255,.22); }
.btn-outline { border-color: var(--line); color: var(--charcoal); background: var(--white); }
.btn-outline:hover { border-color: rgba(51,92,114,.35); color: var(--steel-blue); }
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(31,37,43,.08);
}
.navbar { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display:flex; align-items:center; gap:.95rem; font-weight:800; }
.brand img { width: 170px; height:auto; }
.nav-links { display:flex; align-items:center; gap:1.5rem; }
.nav-links a { color:#33414d; font-weight:600; position:relative; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-.35rem; width:0; height:2px; background: var(--warm-orange); transition: var(--transition); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-cta { display:flex; align-items:center; gap: .75rem; }
.mobile-toggle { display:none; background:none; border:0; font-size:1.65rem; }
.hero {
  position: relative; min-height: calc(100vh - 84px); color: var(--white);
  display:flex; align-items:center; overflow:hidden;
  background: linear-gradient(120deg, rgba(9,17,24,.84), rgba(19,31,41,.58)), url('../images/hero-team.webp') center/cover no-repeat;
}
.hero::after {
  content:""; position:absolute; inset:0; background:
  radial-gradient(circle at 76% 24%, rgba(197,90,25,.16), transparent 26%),
  linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: auto, 62px 62px, 62px 62px;
  pointer-events:none;
}
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); gap:2rem; align-items:end; }
.hero-copy { padding: 6rem 0; max-width: 720px; }
.hero h1 { font-size: clamp(2.7rem, 6vw, 5.4rem); color: var(--white); }
.hero p.lead { font-size: clamp(1.02rem, 1.7vw, 1.25rem); color: rgba(255,255,255,.88); max-width: 650px; }
.hero-card {
  align-self:center; justify-self:end; max-width: 360px; border-radius: 24px; padding: 1.35rem;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 18px 55px rgba(0,0,0,.22); backdrop-filter: blur(10px);
}
.hero-stats { display:grid; grid-template-columns:1fr 1fr; gap: .85rem; margin-top: 1rem; }
.stat { background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding: 1rem; }
.stat strong { display:block; font-size:1.35rem; color: #fff; }
.partner-strip {
  background: linear-gradient(180deg, #fff, #f7fafc); border-bottom:1px solid var(--line);
}
.partner-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; }
.partner {
  min-height:88px; border:1px dashed rgba(51,92,114,.25); border-radius:16px; display:flex; align-items:center; justify-content:center;
  color:#60727e; font-weight:700; background:#fff;
}
.section-head { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom: 2rem; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items:center; }
.card-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.service-card, .value-card, .feature-card, .gallery-item, .contact-card, .copy-card, .stats-band {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.service-card {
  overflow:hidden; display:flex; flex-direction:column; height:100%;
}
.service-card img { aspect-ratio: 16/10; object-fit: cover; }
.service-body { padding: 1.4rem; display:flex; flex-direction:column; gap:.9rem; }
.service-icon {
  width: 50px; height: 50px; border-radius: 14px; display:grid; place-items:center; color:var(--white);
  background: linear-gradient(135deg, var(--steel-blue), var(--deep-steel));
}
.service-list, .tick-list { list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.service-list li, .tick-list li { padding-left: 1.4rem; position:relative; color:#43515c; }
.service-list li::before, .tick-list li::before { content:'•'; position:absolute; left:0; color: var(--warm-orange); font-weight:900; }
.about-panel {
  position:relative; overflow:hidden; border-radius: 26px; min-height: 560px;
  background: linear-gradient(180deg, rgba(31,37,43,.16), rgba(31,37,43,.45)), url('../images/cnc-operations.webp') center/cover no-repeat;
}
.about-panel .floating {
  position:absolute; bottom:1.25rem; left:1.25rem; right:1.25rem; padding: 1.2rem 1.25rem;
  background: rgba(255,255,255,.92); border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
.value-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin-top:1.25rem; }
.value-card { padding:1.15rem; }
.value-card h3 { font-size:1.05rem; }
.metrics { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; margin-top: 2rem; }
.metric { padding:1.2rem; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg, #fff, #f8fbfd); }
.metric strong { display:block; font-size:1.55rem; color: var(--steel-blue); }
.band {
  background: linear-gradient(135deg, var(--charcoal), #2c3740); color: var(--white);
}
.band .stats-band { padding: 1.2rem; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.08); box-shadow:none; }
.band .stats-band p { color: rgba(255,255,255,.78); }
.filters { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.filter-btn {
  padding:.8rem 1.15rem; border-radius:999px; background:#fff; border:1px solid var(--line); cursor:pointer; font-weight:700; color:#44525d;
}
.filter-btn.active, .filter-btn:hover { background: var(--steel-blue); color:#fff; border-color: var(--steel-blue); }
.gallery-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
.gallery-item { overflow:hidden; cursor:pointer; transition: var(--transition); }
.gallery-item:hover { transform: translateY(-4px); }
.gallery-item img { width:100%; aspect-ratio: 16/11; object-fit: cover; }
.gallery-copy { padding: 1rem 1rem 1.1rem; }
.badge { display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .7rem; border-radius:999px; background:#eef4f8; color:var(--deep-steel); font-weight:700; font-size:.78rem; margin-bottom:.7rem; }
.gallery-item[hidden] { display:none; }
.gallery-overlay {
  position: fixed; inset: 0; background: rgba(10, 17, 24, .88); display: none; place-items:center; padding:1rem; z-index:120;
}
.gallery-overlay.open { display:grid; }
.lightbox-inner { max-width:min(1100px, 94vw); max-height:92vh; }
.lightbox-inner img { max-height: 76vh; width:auto; margin:0 auto; border-radius:18px; }
.lightbox-caption { color:#fff; text-align:center; margin-top:1rem; }
.close-lightbox {
  position:absolute; top:1rem; right:1rem; width:48px; height:48px; border-radius:999px; border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08); color:#fff; font-size:1.3rem; cursor:pointer;
}
.contact-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap:1.5rem; }
.contact-card { padding: 1.5rem; }
.contact-list { display:grid; gap:.9rem; margin-top:1rem; }
.contact-item { display:flex; gap:.9rem; align-items:flex-start; }
.contact-icon {
  width:42px; height:42px; border-radius:12px; background:#eef4f8; display:grid; place-items:center; color: var(--steel-blue); flex:0 0 auto;
}
.map-shell { position: relative; }
.map-link {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .7rem .95rem; border-radius: 12px; background: rgba(255,255,255,.96);
  border: 1px solid rgba(31,37,43,.1); box-shadow: 0 10px 24px rgba(9,18,26,.12); font-weight: 700;
}
.map-link:hover { color: var(--steel-blue); }
.map-frame { width:100%; height: 300px; border:0; border-radius: 18px; margin-top: 1.25rem; }
.map-note {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2;
  padding: .85rem 1rem; border-radius: 14px; background: rgba(31,37,43,.82); color: #fff;
  font-weight: 700; box-shadow: 0 12px 28px rgba(9,18,26,.18);
}
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
label { display:block; font-weight:700; margin-bottom:.42rem; }
input, textarea, select {
  width:100%; padding: .92rem 1rem; border-radius: 14px; border:1px solid rgba(31,37,43,.15); background:#fff;
  font: inherit; color: var(--charcoal);
}
textarea { min-height: 150px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline:none; border-color: rgba(51,92,114,.45); box-shadow: 0 0 0 4px rgba(51,92,114,.08); }
.honeypot { position:absolute; left:-5000px; opacity:0; pointer-events:none; }
.notice { font-size:.95rem; color:#5c6b76; margin-top:.8rem; }
.site-footer {
  background: var(--charcoal); color:#d8e1e8; padding-top: 3.5rem;
}
.footer-grid { display:grid; grid-template-columns: 1.15fr .7fr .8fr .8fr; gap:1.5rem; }
.footer-grid p, .site-footer a { color:#d8e1e8; }
.footer-logo { width: 180px; margin-bottom: .85rem; }
.footer-nav { display:grid; gap: .65rem; }
.socials { display:flex; gap:.7rem; margin-top:1rem; }
.socials a {
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; transition: var(--transition);
}
.socials a:hover { background: rgba(255,255,255,.08); }
.footer-bottom { margin-top:2rem; padding:1.2rem 0; border-top:1px solid rgba(255,255,255,.08); color:#aebdc8; }
.page-hero {
  background: linear-gradient(120deg, rgba(19,31,41,.9), rgba(32,49,63,.72)), url('../images/multidiscipline-collage.webp') center/cover no-repeat;
  color:#fff; padding: 6rem 0 4rem;
}
.page-hero h1, .page-hero p { color:#fff; }
.split-list { display:grid; grid-template-columns: repeat(2,1fr); gap:1rem; }
.copy-card { padding:1.5rem; }
.image-stack { display:grid; gap:1rem; }
.image-stack img { border-radius:20px; box-shadow: var(--shadow); }
.quote-box {
  padding:1.3rem 1.4rem; border-radius:18px; background: linear-gradient(135deg, #eef4f8, #fff); border:1px solid var(--line);
}
.reveal { opacity:0; transform: translateY(16px); transition: 700ms ease; }
.reveal.in-view { opacity:1; transform: translateY(0); }
@media (max-width: 1080px) {
  .hero-grid, .grid-2, .contact-grid, .footer-grid, .card-grid, .gallery-grid, .metrics, .partner-grid { grid-template-columns: repeat(2,1fr); }
  .hero-card { justify-self:start; }
}
@media (max-width: 760px) {
  .mobile-toggle { display:block; }
  .nav-links, .nav-cta { display:none; }
  .nav-wrap.open .nav-links, .nav-wrap.open .nav-cta {
    display:flex; flex-direction:column; align-items:flex-start; width:100%; padding: 1rem 0 1.2rem;
  }
  .navbar { flex-wrap:wrap; }
  .brand img { width: 146px; }
  .hero { min-height: auto; }
  .hero-copy { padding: 5rem 0 3rem; }
  .hero-grid, .grid-2, .contact-grid, .card-grid, .gallery-grid, .metrics, .partner-grid, .footer-grid, .form-grid, .value-grid, .split-list { grid-template-columns: 1fr; }
  .section-head { flex-direction:column; align-items:flex-start; }
}