:root{
    --ink:#050912;
    --ink-2:#0A1220;
    --navy-0:#00103E;
    --navy-1:#01114F;
    --navy-2:#031E5C;
    --navy-3:#00306B;
    --blue-1:#123D75;
    --blue-2:#13447C;
    --cobalt:#03518B;
    --cobalt-2:#014D87;
    --bright:#0B5B96;
    --bright-2:#145994;
    --glow:#1A7BB8;
    --white:#F4F7FB;
    --muted:rgba(244,247,251,.64);
    --faint:rgba(244,247,251,.42);
    --line:rgba(11,91,150,.38);
    --font-d:"Saira Condensed","Arial Narrow",sans-serif;
    --font-b:"Outfit","Segoe UI",sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--ink);
    color:var(--white);
    font-family:var(--font-b);
    font-weight:300;
    line-height:1.6;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}
  .eyebrow{
    font-family:var(--font-d);
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    font-size:13px;
    color:var(--glow);
  }
  h2{
    font-family:var(--font-d);
    font-weight:700;
    font-size:clamp(36px,5vw,58px);
    line-height:.95;
    letter-spacing:.02em;
    text-transform:uppercase;
    margin:.2em 0 .4em;
  }
  .lead{font-size:17px;color:var(--muted);max-width:58ch}

  /* NAV */
  header.nav{
    position:absolute;top:0;left:0;right:0;z-index:20;
    display:flex;align-items:center;justify-content:space-between;
    padding:22px 32px;
  }
  .brand{display:flex;align-items:center;gap:12px;color:#fff}
  .brand .mark{width:42px;height:42px;flex:none;display:block}
  .brand .name{
    font-family:var(--font-d);
    font-weight:700;
    font-size:28px;
    letter-spacing:.08em;
    line-height:1;
    display:block;
  }
  .brand .sol{
    font-family:var(--font-d);
    font-weight:600;
    font-size:11px;
    letter-spacing:.34em;
    color:rgba(244,247,251,.82);
    display:block;
    margin-top:3px;
  }
  .nav-links{display:flex;align-items:center;gap:28px}
  .nav-links a{
    font-family:var(--font-d);
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-size:14px;
    color:rgba(244,247,251,.82);
  }
  .nav-links a:hover{color:#fff}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    font-family:var(--font-d);
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-size:14px;
    padding:12px 22px;
    border:1px solid transparent;
    cursor:pointer;
    transition:background .2s,color .2s,box-shadow .2s,border-color .2s;
  }
  .btn-glow{
    background:var(--glow);
    color:#fff;
    box-shadow:0 0 0 1px rgba(26,123,184,.4), 0 0 28px rgba(26,123,184,.35);
  }
  .btn-glow:hover{background:#2190d0;box-shadow:0 0 36px rgba(26,123,184,.55)}
  .btn-ghost{
    background:transparent;
    color:#fff;
    border-color:rgba(244,247,251,.28);
  }
  .btn-ghost:hover{border-color:#fff}
  .menu-toggle{display:none;background:none;border:0;color:#fff;font-family:var(--font-d);letter-spacing:.16em;text-transform:uppercase;font-size:14px;font-weight:700}

  /* HERO */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:140px 0 80px;
    overflow:hidden;
    background:
      radial-gradient(900px 500px at 75% 30%, rgba(26,123,184,.22), transparent 60%),
      radial-gradient(700px 400px at 10% 80%, rgba(1,17,79,.8), transparent 55%),
      linear-gradient(160deg, #050912 0%, #00103E 45%, #031E5C 100%);
  }
  .hero-grid{width:min(1180px,calc(100% - 48px));margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative;z-index:2}
  .hero h1{
    font-family:var(--font-d);
    font-weight:800;
    font-size:clamp(52px,7.2vw,96px);
    line-height:.88;
    letter-spacing:.01em;
    text-transform:uppercase;
    margin:18px 0 22px;
    text-shadow:0 0 40px rgba(26,123,184,.18);
  }
  .hero h1 em{font-style:normal;color:var(--glow)}
  .hero p.sub{font-size:18px;color:var(--muted);max-width:42ch;margin-bottom:32px}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
  .hero-meta{
    margin-top:48px;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
    border-top:1px solid var(--line);
    padding-top:22px;
  }
  .hero-meta strong{
    display:block;
    font-family:var(--font-d);
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:16px;
  }
  .hero-meta span{font-size:13px;color:var(--faint)}
  .hero-art{position:relative;height:min(620px,78vh);min-height:420px}
  .hero-art svg.facets{width:100%;height:100%;display:block;filter:drop-shadow(0 0 40px rgba(11,91,150,.35))}
  .hero-art .glow-orb{
    position:absolute;inset:18% 10% 22% 18%;
    background:radial-gradient(circle, rgba(26,123,184,.45), transparent 68%);
    filter:blur(20px);
    pointer-events:none;
  }

  /* SECTIONS */
  section{padding:100px 0;position:relative}
  .sec-head{margin-bottom:48px;max-width:720px}

  /* SERVICES */
  #services{background:var(--ink-2);border-top:1px solid var(--line)}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .card{
    background:linear-gradient(180deg, rgba(3,30,92,.45), rgba(5,9,18,.7));
    border:1px solid var(--line);
    padding:28px 26px 32px;
    min-height:240px;
    position:relative;
    overflow:hidden;
    transition:border-color .2s, box-shadow .2s, transform .2s;
  }
  .card:hover{
    border-color:rgba(26,123,184,.7);
    box-shadow:0 0 32px rgba(26,123,184,.16);
    transform:translateY(-2px);
  }
  .card:before{
    content:"";
    position:absolute;top:0;right:0;width:90px;height:90px;
    background:linear-gradient(135deg, transparent 50%, rgba(11,91,150,.22) 50%);
    pointer-events:none;
  }
  .card .num{
    font-family:var(--font-d);
    font-weight:700;
    letter-spacing:.14em;
    color:var(--glow);
    font-size:13px;
    margin-bottom:18px;
    display:block;
  }
  .card h3{
    font-family:var(--font-d);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    font-size:26px;
    line-height:1.05;
    margin-bottom:12px;
  }
  .card p{font-size:15px;color:var(--muted)}

  /* ABOUT */
  #about{background:linear-gradient(180deg,#050912,#01114F 80%)}
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .about-copy p{margin-bottom:18px;color:var(--muted);font-size:16.5px}
  .about-copy p.emphasis{color:var(--white);font-weight:400;font-size:20px;line-height:1.45}
  .pillars{display:grid;gap:14px}
  .pillar{
    display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
    padding:18px 18px;
    border-left:3px solid var(--glow);
    background:rgba(1,17,79,.4);
  }
  .pillar b{
    font-family:var(--font-d);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:15px;
    display:block;
    margin-bottom:4px;
  }
  .pillar span{font-size:14px;color:var(--muted)}

  /* SECTORS */
  #sectors{background:var(--ink);border-top:1px solid var(--line)}
  .sector-list{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
  .sector{
    background:var(--ink-2);
    padding:28px 24px;
    min-height:120px;
    display:flex;flex-direction:column;justify-content:flex-end;
    position:relative;
    overflow:hidden;
  }
  .sector:after{
    content:"";
    position:absolute;top:-20px;right:-20px;
    width:110px;height:110px;
    background:linear-gradient(135deg,transparent 46%, rgba(3,81,139,.35) 46%, rgba(3,81,139,.35) 54%, transparent 54%);
  }
  .sector h3{
    font-family:var(--font-d);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-size:22px;
    position:relative;z-index:1;
  }
  .experience{
    margin-top:40px;
    color:var(--muted);
    font-size:15px;
    max-width:80ch;
  }

  /* TOOLS / WHY */
  #approach{
    background:
      radial-gradient(600px 280px at 90% 10%, rgba(26,123,184,.15), transparent 60%),
      var(--ink-2);
    border-top:1px solid var(--line);
  }
  .split{display:grid;grid-template-columns:1fr 1fr;gap:64px}
  .quote{
    font-family:var(--font-d);
    font-weight:700;
    font-size:clamp(28px,3.4vw,40px);
    line-height:1.05;
    text-transform:uppercase;
    letter-spacing:.02em;
    margin:12px 0 24px;
  }
  .tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
  .tool{
    border:1px solid var(--line);
    padding:8px 14px;
    font-family:var(--font-d);
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:13px;
    color:var(--white);
  }

  /* CTA */
  #cta{
    position:relative;
    padding:120px 0;
    overflow:hidden;
    background:linear-gradient(120deg,#00103E,#00306B 50%,#03518B);
    text-align:center;
  }
  #cta .facets-bg{position:absolute;inset:0;opacity:.35;pointer-events:none}
  #cta .wrap{position:relative;z-index:1}
  #cta h2{margin-left:auto;margin-right:auto}
  #cta p{margin:0 auto 28px;color:rgba(244,247,251,.85)}

  /* FOOTER */
  footer{
    background:#000;
    padding:64px 0 32px;
    border-top:1px solid #111;
  }
  .foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;margin-bottom:48px}
  footer h3{
    font-family:var(--font-d);
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-size:13px;
    color:var(--glow);
    margin-bottom:14px;
  }
  footer p,footer a{color:rgba(244,247,251,.72);font-size:15px}
  footer a:hover{color:#fff}
  .legal{
    border-top:1px solid #1a1a1a;
    padding-top:18px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
    font-size:12px;color:rgba(244,247,251,.4);
    font-family:var(--font-d);letter-spacing:.08em;text-transform:uppercase;
  }

  @media (max-width:900px){
    .hero-grid,.about-grid,.split,.cards,.sector-list,.foot-grid{grid-template-columns:1fr}
    .cards{grid-template-columns:1fr 1fr}
    .menu-toggle{display:inline-flex;align-items:center;min-height:42px;padding:0 4px;z-index:22}
    .nav-links{
      display:none;
      position:absolute;
      top:calc(100% - 8px);
      right:16px;
      left:auto;
      min-width:220px;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      background:rgba(5,9,18,.96);
      border:1px solid var(--line);
      padding:10px;
      box-shadow:0 16px 40px rgba(0,0,0,.45);
    }
    .nav-links.is-open{display:flex}
    .nav-links a:not(.btn){display:block;padding:12px 14px}
    .nav-links .btn{margin:6px 8px 8px;width:calc(100% - 16px)}
    header.nav{padding:16px 20px}
    .hero{padding:120px 0 60px;min-height:auto}
    .hero-art{height:340px;min-height:280px;order:-1}
    section{padding:72px 0}
  }
  @media (max-width:620px){
    .cards{grid-template-columns:1fr}
    .wrap,.hero-grid{width:calc(100% - 32px)}
    .hero-meta{grid-template-columns:1fr;gap:18px}
    .brand .name{font-size:22px}
    .brand .mark{width:34px;height:34px}
  }