:root{
  --bg: #0b1020;
  --bg-soft: #0f162b;
  --card: #131a33;
  --text: #e6eaf2;
  --muted: #b7bfd4;
  --brand: #4ea3ff;      /* electric blue accent */
  --brand-600:#1f79e2;
  --ring: rgba(78,163,255,.35);
  --gold: #d6b25e;       /* optional secondary accent */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --container: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.reduce-motion{scroll-behavior:auto}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg) 0%, #0a0f1a 100%);
  color:var(--text);
}
img{max-width:100%; display:block}
a{color:var(--text); text-underline-offset:3px}

.container{width:min(100%, var(--container)); margin-inline:auto; padding-inline:20px}
.section{padding: 72px 0}
.grid-2{display:grid; gap:32px; grid-template-columns: 1.1fr 0.9fr}
@media (max-width: 880px){ .grid-2{grid-template-columns:1fr} }

/* Header */
.site-header{position:sticky; top:0; z-index:100; background:rgba(11,16,32,.6); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700}
.brand-mark{filter: drop-shadow(0 2px 8px var(--ring))}
.logo-ring{stroke:var(--brand); stroke-width:1.5; fill:transparent}
.logo-stroke{stroke:var(--text); stroke-width:1.5; fill:transparent; stroke-linecap:round}
.brand-text{letter-spacing:.2px}

.site-nav{display:flex; align-items:center; gap:18px}
.site-nav a{opacity:.9; text-decoration:none}
.site-nav .btn{margin-left:6px}

.nav-toggle{display:none}
@media (max-width: 860px){
  .nav-toggle{display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid rgba(255,255,255,.1); color:var(--text); padding:8px 12px; border-radius:10px}
  .site-nav{position:absolute; inset:64px 0 auto 0; background:var(--bg-soft); border-bottom:1px solid rgba(255,255,255,.08); padding:12px 20px; flex-direction:column; align-items:flex-start; display:none}
  .site-nav.open{display:flex}
}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:12px; text-decoration:none; border:1px solid transparent; font-weight:600; box-shadow: var(--shadow)}
.btn-sm{padding:8px 12px; font-size:.92rem}
.btn-primary{background:var(--brand); color:#061022}
.btn-primary:hover{background:var(--brand-600)}
.btn-outline{border-color:rgba(255,255,255,.2)}
.btn-outline:hover{border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.04)}
.btn-ghost{background:rgba(255,255,255,.05)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}

/* Skip link */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; padding:10px 14px; background:#fff; color:#000; border-radius:8px}

/* Hero */
.hero{position:relative; min-height:76vh; display:grid; place-items:center; text-align:center; overflow:hidden}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.45)}
.hero-overlay{position:absolute; inset:0; background: radial-gradient(1100px 600px at 50% -10%, rgba(78,163,255,.25), transparent), linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 35%, rgba(0,0,0,.5) 100%)}
.hero-inner{position:relative; padding:80px 0}
.hero h1{font-size: clamp(2rem, 5vw, 3.25rem); margin:0 0 10px}
.tagline{color:var(--muted); font-size: clamp(1rem, 2.4vw, 1.25rem)}
.hero-cta{margin-top:22px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* About */
.about .stats{display:flex; gap:18px; margin-top:18px; flex-wrap:wrap}
.stat{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); padding:14px 16px; border-radius:12px; text-align:center}
.kpi{font-weight:800; font-size:1.25rem}
.label{display:block; font-size:.85rem; color:var(--muted)}
.about-card{background:var(--card); border:1px solid rgba(255,255,255,.07); padding:22px; border-radius:var(--radius); box-shadow: var(--shadow)}
.checklist{padding-left:18px}
.checklist li{margin:8px 0}

/* Leadership */
/* Grid stays the same */
.leadership .cards { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width:820px){ .leadership .cards{ grid-template-columns:1fr; } }

/* Make cards equal height and cleaner */
.card.person { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.card.person img{
  width:100%;
  filter: brightness(0.6);
  aspect-ratio: 1 / 1;           
  object-fit: cover;
  object-position: 50% 20%;     
  border-bottom:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
}
.card-body{
  display:flex; flex-direction:column; gap:.4rem;
  padding:18px; flex:1;         
}
.role{ color:var(--muted); margin:0 0 .25rem; }
.actions{ margin-top:auto; display:flex; gap:10px; }

/* Small hover lift to feel alive */
.card.person:hover{ 
    transform:translateY(-2px); transition:.18s ease; 
    filter: brightness(0.8);
}


/* Brands */
/* =======================
   Brands Section
   ======================= */

   .brands {
    margin-top: 48px;
  }
  
  /* Brand row: logo left, copy right on desktop */
  .brands .brand-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 22px;
    align-items: center;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow);
    margin-top: 30px;

  }
  
  /* Logo block */
  .brands .brand-logo img {
    width: 140px;
    height: auto;
    display: block;
    object-fit: contain;
  }
  
  /* Text & actions */
  .brands .brand-copy h3 {
    margin-top: 0;
    font-weight: 600;
  }
  .brands .brand-copy p {
    margin: .8rem 0 1rem;
    line-height: 1.55;
    color: var(--text);
  }
  .brands .brand-copy .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  
  /* “Future divisions” card */
  .brand-future {
    margin-top: 24px;
    background: transparent;
    border: 1px dashed rgba(255,255,255,.2);
    border-radius: var(--radius);
    padding: 18px;
  }
  .pill {
    display: inline-block;
    font-size: .75rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(78,163,255,.15);
    border: 1px solid rgba(78,163,255,.35);
    margin-bottom: 8px;
  }
  .future-list {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
  }
  
  /* -----------------------
     Responsive adjustments
     ----------------------- */
  
  /* Tablets: shrink logo column slightly */
  @media (max-width: 880px) {
    .brands .brand-row {
      grid-template-columns: 140px 1fr;
      gap: 18px;
    }
    .brands .brand-logo img {
      width: 120px;
    }
  }
  
  /* Phones: stack logo above text */
  @media (max-width: 640px) {
    .brands .brand-row {
      grid-template-columns: 1fr;    /* one column layout */
      text-align: center;
      padding: 20px 18px;
    }
    .brands .brand-logo img {
      margin-inline: auto;          /* center logo */
      width: 160px;
      max-width: 80%;
    }
    .brands .brand-copy {
      margin-top: 16px;             /* space between logo and copy */
    }
    .brands .brand-copy .actions {
      justify-content: center;      /* center the buttons */
    }
  }
  

/* Press */
.press .press-note{background:linear-gradient(145deg, rgba(214,178,94,.08), rgba(78,163,255,.08)); border:1px solid rgba(255,255,255,.1); padding:22px; border-radius:var(--radius)}
.contact-list{list-style:none; padding:0; margin:10px 0 0}
.contact-list li{margin:8px 0}

/* News */
.news .news-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:22px;
  }
  .post-card{
    background:var(--card);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    padding:18px;
    box-shadow:var(--shadow);
    display:flex; flex-direction:column; gap:.6rem;
  }
  .post-card .post-meta{
    display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.9rem;
  }
  .post-card .pill{
    padding:4px 10px; border-radius:999px;
    background:rgba(78,163,255,.15); border:1px solid rgba(78,163,255,.35);
    font-size:.75rem;
  }
  .post-card .post-title{ margin:.2rem 0; }
  .post-card .post-summary{ color:var(--muted); }
  .post-card .post-link{ align-self:flex-start; }
  .post-card:hover{ transform:translateY(-2px); transition:.18s ease; }
  


/* Careers */
.careers { position: relative; }
.careers-hero{
  display:grid; grid-template-columns: 1.2fr 0.8fr; gap:24px;
  background: radial-gradient(800px 300px at 20% 0%, rgba(78,163,255,.10), transparent),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  padding:24px; border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
@media (max-width: 880px){ .careers-hero{ grid-template-columns:1fr; } }

.careers-copy .lead{ color:var(--muted); max-width:56ch; }
.values{ display:grid; gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.values li{
  padding:8px 12px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
}
.cta-row{ display:flex; gap:12px; align-items:center; margin-top:16px; flex-wrap:wrap; }
.tag{
  font-size:.8rem; padding:6px 10px; border-radius:999px;
  background:rgba(214,178,94,.12); border:1px solid rgba(214,178,94,.35);
}

.careers-card{
  background:var(--card); border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding:20px; display:flex; flex-direction:column; gap:.5rem;
}
.careers-card .kicker{ text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0; }

/* Contact — wide, polished */
.contact-grid { display:block; }               
.contact-info.card{
  width:100%;
  max-width:none;
  padding:32px;
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.contact-list.pro{
  list-style:none;
  padding:0;
  margin:12px 0 14px;
}
.contact-list.pro li{ margin:6px 0; }

.divider{ height:1px; background:rgba(255,255,255,.08); margin:16px 0; }
.muted{ color:var(--muted); margin:.25rem 0; }

.social-row{
  display:flex;
  gap:12px;
  align-items:center;
  opacity:.9;
}

/* (Optional) subtle lift on hover */
.contact-info.card:hover { transform: translateY(-1px); transition:.18s ease; }




/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.08); background:#0a0f1a}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px}
.footer-inner .social{display:flex; gap:14px}
.footer-inner a{opacity:.8}
.footer-inner a:hover{opacity:1}