:root{
  --bg:#0b0b0b;
  --surface:#171717;
  --text:#f5f5f5;
  --muted:#a7a7a7;
  --accent:#00ff6d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Archivo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.nav{
  position:fixed;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 24px; z-index:20;
  background:linear-gradient(180deg, rgba(0,0,0,.65), transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:saturate(140%) blur(8px);
}
.nav img{height:28px}
.nav nav a{margin-left:18px;font-weight:600;opacity:.9}
.nav .cta{color:var(--bg);background:var(--accent);padding:10px 16px;border-radius:999px;margin-left:24px}
.hero{position:relative;min-height:92vh;display:grid;place-items:center;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(80%) contrast(110%) brightness(65%)}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 20%, rgba(0,0,0,.2), rgba(0,0,0,.75))}
.hero-content{position:relative;z-index:1;max-width:1100px;padding:120px 24px 56px}
.hero h1{font-size:clamp(48px,8vw,128px);letter-spacing:1px;margin:0 0 8px}
.hero h1 span{font-weight:700}
.kicker{margin:0 0 12px;letter-spacing:.3em;color:var(--text);opacity:.9}
.kicker .now{color:var(--accent);font-weight:800}
.lede{max-width:820px;color:var(--muted);font-size:1.05rem}
.btn{display:inline-block;background:transparent;border:1.5px solid var(--accent);color:var(--accent);padding:12px 18px;border-radius:999px;font-weight:700;margin-top:18px}
.btn.small{padding:10px 14px;font-size:.95rem}
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;padding:80px 24px;max-width:1200px;margin:0 auto}
.split .copy h2{font-size:clamp(28px,4.5vw,48px);margin:.2rem 0 1rem}
.bullets{color:var(--muted)}
.bullets li{margin:.4rem 0}
.media{border-radius:20px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.gallery{padding:32px 24px 8px;max-width:1200px;margin:0 auto}
.gallery h3{font-size:clamp(22px,3vw,32px)}
.gallery .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
.gallery figure{background:var(--surface);border-radius:18px;overflow:hidden}
.gallery figcaption{padding:12px 14px;color:var(--muted);font-size:.95rem}
.cards{max-width:1200px;margin:18px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--surface);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.card > div{padding:16px}
.card h4{margin:.2rem 0 .3rem}
.timeline{max-width:1200px;margin:12px auto;padding:40px 24px;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.timeline h3{margin-top:0}
.timeline ol{margin:0;padding-left:1.1rem;color:var(--muted)}
.timeline .pipeline{margin-top:18px;background:var(--surface);padding:16px;border-radius:14px}
.timeline-media{border-radius:18px;overflow:hidden}
.team{max-width:1100px;margin:0 auto;padding:40px 24px}
.person{display:flex;gap:22px;align-items:center;background:var(--surface);padding:16px;border-radius:18px}
.person img{width:44%;border-radius:14px;object-fit:cover}
.contact{padding:60px 24px}
.cta-box{max-width:900px;margin:0 auto;background:#0f0f0f;border:1px solid rgba(255,255,255,.06);border-radius:24px;padding:28px;text-align:center;position:relative}
.cta-box .mark{position:absolute;left:24px;top:-36px;width:72px;opacity:.9}
.cta-box .meta{margin-top:10px;color:var(--muted)}
.footer{border-top:1px solid rgba(255,255,255,.06);padding:22px 24px;margin-top:60px}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:20px;justify-content:space-between}
.footer nav a{margin:0 10px;color:var(--muted)}
.footer img{height:24px}
.small{color:var(--muted);font-size:.9rem}
@media (max-width: 980px){
  .split{grid-template-columns:1fr;gap:20px}
  .gallery .grid{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .person{flex-direction:column}
  .person img{width:100%}
}

/* Expertise gallery uniform sizing */
.gallery .grid img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
@media (max-width: 768px) {
  .gallery .grid img {
    height: 180px;
  }
}

/* Burger menu */
.burger {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.8rem;
  cursor: pointer;
  margin-left: auto;
}
.mobile-nav {
  display: flex;
  gap: 18px;
}
@media (max-width: 768px) {
  nav > a { display: none; } /* hide desktop links */
  .burger { display: block; }
  .mobile-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 0;
    background: var(--surface);
    padding: 16px;
    border-radius: 0 0 8px 8px;
    width: 200px;
  }
  .mobile-nav.show { display: flex; }
  .nav img {
    content: url('assets/img/d600e8c6-b47b-4795-b17e-4097df7f40a4.png');
    height: auto;
    max-height: 32px;
    width: auto;
  }
}

/* Header: responsive brand + wrapping menu (no burger) */
.nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand picture, .brand img{display:block; height:auto}
.brand img{max-height:32px;width:auto}

  .brand img{max-height:24px}
  .nav nav{width:100%; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; margin-top:8px}
  .nav nav a{font-size:14px; line-height:1.2; padding:6px 0}
}

/* Keep top menu on a single line across small screens via responsive sizing */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav .brand{flex:0 0 auto}
.nav nav{flex:1 1 auto; display:flex; justify-content:flex-end; align-items:center; gap:18px; flex-wrap:nowrap; white-space:nowrap}
.nav nav a{font-size:16px}

/* Tighten progressively */
@media (max-width: 820px){
  .brand img{max-height:26px}
  .nav nav{gap:14px}
  .nav nav a{font-size:15px}
}
@media (max-width: 700px){
  .brand img{max-height:24px}
  .nav nav{gap:12px}
  .nav nav a{font-size:14px}
}
@media (max-width: 620px){
  .brand img{max-height:22px}
  .nav nav{gap:10px}
  .nav nav a{font-size:13px; letter-spacing:0.02em}
}
@media (max-width: 560px){
  .brand img{max-height:20px}
  .nav nav{gap:8px}
  .nav nav a{font-size:12px}
}
@media (max-width: 500px){
  .brand img{max-height:18px}
  .nav nav{gap:6px}
  .nav nav a{font-size:11.5px}
}
@media (max-width: 440px){
  .brand img{max-height:16px}
  .nav nav{gap:6px}
  .nav nav a{font-size:11px}
}


/* Expertise grid: enforce identical image size on all items */
.gallery .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width: 980px){ .gallery .grid{grid-template-columns:1fr 1fr} }
@media (max-width: 560px){ .gallery .grid{grid-template-columns:1fr} }
.gallery .grid figure{background:var(--surface);border-radius:18px;overflow:hidden}
.gallery .grid img{display:block;width:100%;height:240px;object-fit:cover}
@media (max-width: 768px){ .gallery .grid img{height:180px} }
@media (max-width: 420px){ .gallery .grid img{height:160px} }


/* Extra-tight header under 380px */
@media (max-width: 380px){
  .brand img{max-height:14px}
  .nav nav{gap:6px}
  .nav nav a{font-size:10.5px;letter-spacing:0}
}

/* Logo heading: ensure the image scales like text and stays responsive */
.hero h1{display:flex;align-items:flex-end;line-height:1}
.hero h1 img{height:1em;width:auto;max-width:100%;display:block}
@media (max-width:640px){
  .hero h1{justify-content:center}
}