:root{
      --bg:#0B0D10;
      --text:#F5F7FA;
      --muted:rgba(245,247,250,.72);
      --muted2:rgba(245,247,250,.55);
      --line:rgba(245,247,250,.10);
      --accent:#7C3AED;

      --container:1120px;
      --radius:18px;

      --h1:clamp(2.1rem, 4.8vw, 4.1rem);
      --h2:clamp(1.35rem, 2.3vw, 2.1rem);

      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    *{ box-sizing:border-box; }
    html, body{ height:100%; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      font-family:var(--sans);
      background:var(--bg);
      color:var(--text);
      line-height:1.55;
      letter-spacing:-0.01em;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    /* anchor offset for sticky header */
    section[id]{ scroll-margin-top: 120px; }

    a{ color:inherit; text-decoration:none; }
    a:hover{ text-decoration:underline; text-underline-offset:4px; }
    .container{ max-width:var(--container); margin:0 auto; padding:0 22px; }

    /* Background texture */
    .texture{
      position:fixed; inset:0; pointer-events:none; z-index:0;
      background:
        radial-gradient(900px 520px at 18% 8%, rgba(124,58,237,.20), transparent 60%),
        radial-gradient(900px 520px at 80% 12%, rgba(124,58,237,.10), transparent 62%),
        radial-gradient(800px 520px at 50% 90%, rgba(124,58,237,.08), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 28%);
      opacity:.55;
    }
    .noise{
      position:fixed; inset:0; pointer-events:none; z-index:0;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
      mix-blend-mode:overlay; opacity:.12;
    }

    /* Header */
    header{
      position:sticky; top:0; z-index:20;
      background:rgba(11,13,16,.72);
      backdrop-filter: blur(10px);
    }
    .navWrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
    .brand{ display:flex; align-items:center; min-width:180px; }
    .logoWide{ height:75px; width:auto; display:block; }
    .logoIcon{ height:34px; width:34px; display:none; }

    nav{ display:flex; gap:22px; align-items:center; justify-content:center; }
    nav a{ color:var(--muted); font-weight:700; font-size:.95rem; padding:8px 0; position:relative; }
    nav a:hover{ color:var(--text); text-decoration:none; }
    nav a::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; background:transparent; }
    nav a:hover::after{ background:rgba(124,58,237,.55); }

    .cta{ display:flex; gap:10px; align-items:center; min-width:180px; justify-content:flex-end; }
    .btn{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 14px; border-radius:999px;
      font-weight:800; font-size:.95rem; letter-spacing:-0.01em;
      border:1px solid transparent; text-decoration:none !important; white-space:nowrap;
    }
    .btnPrimary{ background:var(--text); color:#0B0D10; }
    .btnPrimary:hover{ filter:brightness(.95); }
    .btnGhost{ border-color:var(--line); color:var(--muted); background:transparent; }
    .btnGhost:hover{ color:var(--text); text-decoration:none; border-color:rgba(245,247,250,.22); }

    .burger{ display:none; border:1px solid var(--line); border-radius:999px; padding:10px 12px; background:transparent; color:var(--text); cursor:pointer; }

    /* Mobile menu */
    .mobile{ display:none; position:fixed; inset:0; z-index:50; padding:18px; background:rgba(11,13,16,.92); backdrop-filter: blur(10px); }
    .mobilePanel{ max-width:520px; margin:0 auto; border-radius:24px; border:1px solid var(--line); background:rgba(14,17,22,.88); padding:16px; }
    .mobileTop{ display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid rgba(255,255,255,.06); }
    .mobileLinks{ display:grid; gap:10px; }
    .mobileLinks a{ padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.03); font-weight:800; color:var(--text); text-decoration:none; }

    /* Hero */
    main{ position:relative; z-index:1; }
    .hero{ padding:74px 0 54px; }
    .heroGrid{ display:grid; grid-template-columns: 1.08fr .92fr; gap:44px; align-items:start; }
    .eyebrow{ display:inline-flex; gap:10px; align-items:center; font-weight:750; color:var(--muted); font-size:.92rem; }
    .eyebrowDot{ width:8px; height:8px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 8px rgba(124,58,237,.12); }
    h1{ font-size:var(--h1); line-height:1.02; letter-spacing:-0.05em; margin:14px 0 14px; }
    .accentText{
      background: linear-gradient(90deg, rgba(245,247,250,1), rgba(124,58,237,.95));
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    .lead{ color:var(--muted); max-width:58ch; margin:0 0 22px; font-size:1.08rem; }
    .heroActions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }

    /* outcomes strip (single set; no duplication) */
    .outcomes{
      grid-column:1 / -1;
      margin-top:22px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.06);
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:14px;
    }
    .outcome{
      padding:10px 0;
    }
    .outcomeNum{
      font-family:var(--mono);
      font-weight:900;
      letter-spacing:-0.02em;
      font-size:1.25rem;
      color:rgba(245,247,250,.92);
    }
    .outcomeLabel{
      margin-top:6px;
      color:var(--muted);
      font-size:.92rem;
      max-width:26ch;
    }
    /* special handling for long certification text */
    .outcomeBadge .outcomeNum{
      font-family:var(--sans);
      font-size:1.02rem;
      line-height:1.2;
      letter-spacing:-0.03em;
    }
    .outcomeBadge .outcomeLabel{
      font-family:var(--mono);
      font-size:.85rem;
      color:var(--muted2);
    }

    .heroArt{ border-radius:var(--radius); background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); overflow:hidden; min-height:360px; }
    .heroArt svg{ display:block; width:100%; height:100%; }

    /* Sections */
    section{ padding:64px 0; }
    .sectionHead{ max-width:100%; margin-bottom:26px; }
    h2{ font-size:var(--h2); line-height:1.1; letter-spacing:-0.03em; margin:0; }
    .sub{ margin-top:10px; color:var(--muted); }
    .sub + .sub{ margin-top:10px; }
    .wideCopy .sub{ max-width:100%; }

    /* Service cards */
    .cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:22px; }
    .card{
      border-radius:22px;
      border:1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      overflow:hidden;
      min-height:320px;
    }
    .cardTop{ height:150px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
    .cardBody{ padding:18px 18px 16px; }
    .cardTitle{ margin:0 0 8px; font-weight:900; letter-spacing:-0.02em; font-size:1.05rem; }
    .cardText{ margin:0 0 12px; color:var(--muted); }
    .chips{ display:flex; flex-wrap:wrap; gap:8px; color:var(--muted2); font-size:.92rem; }
    .chip{ padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.10); }
    .cardLink{ display:inline-flex; align-items:center; gap:10px; margin-top:14px; font-weight:850; }

    /* Approach (3-step) */
    .steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:22px; }
    .step{
      border-radius:22px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      padding:18px;
      min-height:170px;
    }
    .stepNum{
      font-family:var(--mono);
      color:rgba(245,247,250,.55);
      font-weight:900;
      letter-spacing:-0.02em;
      margin-bottom:10px;
      font-size:.95rem;
    }
    .stepTitle{
      margin:0 0 8px;
      font-weight:900;
      letter-spacing:-0.02em;
    }
    .stepText{
      margin:0;
      color:var(--muted);
      font-size:.98rem;
    }

    /* Two-column content blocks */
    .split{ display:grid; grid-template-columns: 1.12fr .88fr; gap:44px; align-items:start; margin-top:24px; }
    .bullets{ margin:16px 0 0; padding:0; list-style:none; display:grid; gap:10px; color:var(--muted); }
    .bullets li{ display:flex; gap:10px; align-items:flex-start; }
    .tick{ width:14px; height:14px; flex:0 0 14px; margin-top:2px; background:rgba(124,58,237,.22); border-radius:5px; position:relative; }
    .tick::after{
      content:""; position:absolute; left:4px; top:2px;
      width:5px; height:8px; border-right:2px solid rgba(245,247,250,.9);
      border-bottom:2px solid rgba(245,247,250,.9);
      transform:rotate(35deg);
    }
    .bullets strong{ color:var(--text); }
    .pillars{ display:grid; grid-template-columns: 1fr; gap:12px; margin-top:12px; }
    .pillar{ display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06); }
    .pillar:last-child{ border-bottom:0; }
    .pillarName{ font-weight:900; letter-spacing:-0.02em; }
    .pillarDesc{ color:var(--muted); text-align:right; max-width:44ch; font-size:.95rem; }

    /* Case studies */
    .cases{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:20px; }
    .case{ text-decoration:none !important; display:flex; flex-direction:column; gap:12px; }
    .thumb{ border-radius:16px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.03); overflow:hidden; aspect-ratio: 16/10; }
    .thumb svg{ width:100%; height:100%; display:block; }
    .caseTitle{ margin:0; font-weight:900; letter-spacing:-0.02em; }
    .caseText{ margin:0; color:var(--muted); font-size:.96rem; }
    .caseMeta{ margin-top:4px; color:var(--muted2); font-family:var(--mono); font-size:.82rem; }

    /* Partnerships logo grid */
    .logoGrid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:18px; }
    .logoBox{
      background:#ffffff;
      border:1px solid rgba(11,13,16,.12);
      border-radius:16px;
      height:110px;
      padding:14px 16px;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }
    .logoBox img{
      width:clamp(160px, 18vw, 220px);
      height:70px;
      object-fit:contain;
      display:block;
    }

    /* Company profiles */
    .profiles{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:22px; }
    .profile{
      border-radius:22px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      padding:18px;
    }
    .profileTop{ display:flex; gap:12px; align-items:center; }
    .avatar{
      width:46px; height:46px; border-radius:16px;
      background: radial-gradient(60% 60% at 30% 30%, rgba(124,58,237,1), rgba(124,58,237,.25));
      box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
      display:grid; place-items:center;
      font-weight:900;
    }
    .profileName{ margin:0; font-weight:900; letter-spacing:-0.02em; }
    .profileRole{ margin-top:2px; color:var(--muted2); font-weight:800; font-size:.92rem; }
    .profileBio{ margin:12px 0 0; color:var(--muted); }

    .teamGrid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin-top:14px; }
    .teamChip{
      border:1px solid rgba(255,255,255,.07);
      border-radius:16px;
      background:rgba(255,255,255,.02);
      padding:12px;
      color:rgba(245,247,250,.85);
      font-weight:850;
      letter-spacing:-0.01em;
      font-size:.92rem;
      display:flex;
      align-items:center;
      gap:10px;
      min-height:52px;
    }
    .teamDot{
      width:10px; height:10px; border-radius:999px;
      background:rgba(124,58,237,.75);
      box-shadow:0 0 0 7px rgba(124,58,237,.12);
      flex:0 0 10px;
    }

    /* FAQ */
    .faq{ margin-top:18px; border-top:1px solid rgba(255,255,255,.06); }
    .faq details{ padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); }
    .faq summary{
      cursor:pointer;
      list-style:none;
      font-weight:900;
      letter-spacing:-0.02em;
      color:rgba(245,247,250,.92);
    }
    .faq summary::-webkit-details-marker{ display:none; }
    .faq summary::after{
      content:"+";
      float:right;
      color:rgba(245,247,250,.55);
      font-family:var(--mono);
      font-weight:900;
    }
    .faq details[open] summary::after{ content:"–"; }
    .faqBody{ margin-top:10px; color:var(--muted); max-width:82ch; }

    /* CTA / Contact */
    .final{ padding:72px 0 90px; }
    .finalInner{ display:flex; align-items:center; justify-content:space-between; gap:18px; border-top:1px solid rgba(255,255,255,.06); padding-top:26px; }
    .final h2{ margin:0; }
    .final p{ margin:10px 0 0; color:var(--muted); max-width:70ch; }

    /* Footer */
    footer{
    padding:34px 0 46px;
    color:var(--muted2);
    border-top:1px solid rgba(255,255,255,.06);
    }

    /* force a real two-column layout */
    .foot{
    display:grid;
    grid-template-columns: 1.35fr .65fr;
    gap:28px;
    align-items:start;
    }

    .footLeft{
    display:flex;
    align-items:flex-start;
    gap:12px;
    }

    .footLeftTitle{
    font-weight:850;
    letter-spacing:-0.02em;
    }

    .footLeftMeta{
    margin-top:2px;
    color:var(--muted2);
    }

    .footBlurb{
    margin:10px 0 0;
    color:rgba(245,247,250,.55);
    font-size:.9rem;
    max-width:72ch;
    }

    /* Footer right side: grouped link columns */
    .footRight{
    display:grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap:34px;
    align-items:start;
    }

    .footGroupTitle{
    font-family: var(--mono);
    font-size:.82rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(245,247,250,.55);
    margin:0 0 14px;
    }

    .footGroupList{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:12px;
    }

    .footGroupList a{
    color:var(--muted2);
    font-weight:750;
    }

    .footGroupList a:hover{
    color:var(--text);
    text-decoration:none;
    }

    /* Social icons like end.game */
    .socialIcons{
    display:flex;
    gap:12px;
    margin-top:14px;
    }

    .socialIconBtn{
    width:44px;
    height:44px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.03);
    }

    .socialIconBtn:hover{
    border-color:rgba(255,255,255,.20);
    background:rgba(255,255,255,.05);
    text-decoration:none;
    }

    .socialIconBtn svg{
    width:18px;
    height:18px;
    opacity:.9;
    }

    /* nav links block */
    .footLinks{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:10px;
    justify-items:end;
    }
    .footLinks a{
    color:var(--muted2);
    font-weight:800;
    }
    .footLinks a:hover{
    color:var(--text);
    text-decoration:none;
    }

    /* policies + social */
    .footLegal{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:10px;
    justify-items:end;
    }
    .footLegal a{
    color:var(--muted2);
    font-weight:800;
    }
    .footLegal a:hover{
    color:var(--text);
    text-decoration:none;
    }

    .socialLink{
    display:inline-flex;
    gap:8px;
    align-items:center;
    }
    .socialIcon{
    width:18px;
    height:18px;
    display:block;
    opacity:.9;
    }


    @media (max-width: 980px){
      section[id]{ scroll-margin-top: 92px; }

      .heroGrid{ grid-template-columns:1fr; }
      .outcomes{ grid-template-columns: repeat(2, 1fr); }
      .cards{ grid-template-columns:1fr; }
      .steps{ grid-template-columns:1fr; }
      .split{ grid-template-columns:1fr; }
      .cases{ grid-template-columns:1fr; }
      .logoGrid{ grid-template-columns:1fr; }
      .profiles{ grid-template-columns:1fr; }
      .teamGrid{ grid-template-columns:1fr 1fr; }

      nav{ display:none; }
      .burger{ display:inline-flex; }
      .logoWide{ display:none; }
      .logoIcon{ display:block; }

      .finalInner{ flex-direction:column; align-items:flex-start; }
      .foot{ grid-template-columns: 1fr; }
      .footRight{ grid-template-columns: 1fr; gap:22px;}
      .footLinks, .footLegal{ justify-content:start; }
    }

    /* Mapbox popup styling to match site theme */
    .mapboxgl-popup-content {
      background: #ffffff;
      color: #0B0D10;
      border-radius: 14px;
      padding: 12px 14px;
      font-family: var(--sans);
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }

    .mapboxgl-popup-content strong {
      color: #0B0D10;
    }

    .mapboxgl-popup-tip {
      border-top-color: #ffffff;
    }

    /* Legal Styles */
    .legalWrap{ padding:74px 0 70px; }
    .legalMeta{ margin-top:10px; color:var(--muted2); font-family:var(--mono); font-size:.9rem; }
    .legalCard{
      margin-top:20px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      border-radius:22px;
      padding:16px 18px;
    }
    .legalToc{
      margin-top:16px;
      display:grid;
      gap:8px;
      padding-left:18px;
      color:var(--muted);
    }
    .legalToc a{ color:var(--muted); font-weight:750; }
    .legalToc a:hover{ color:var(--text); text-decoration:none; }
    .legalArticle{ margin-top:26px; }
    .legalArticle h2{
      margin:28px 0 10px;
      font-size:1.25rem;
      letter-spacing:-0.02em;
      line-height:1.15;
    }
    .legalArticle p{ color:var(--muted); margin:0 0 12px; }
    .legalArticle ul{
      margin:10px 0 16px;
      padding-left:18px;
      color:var(--muted);
    }
    .legalArticle li{ margin:8px 0; }
    .legalDivider{
      margin:26px 0 0;
      border-top:1px solid rgba(255,255,255,.06);
      padding-top:18px;
    }
    .legalContact{
      color:var(--muted);
      margin-top:10px;
      line-height:1.65;
    }
    .legalContact a{ color:var(--text); text-decoration:none; }
    .legalContact a:hover{ text-decoration:underline; text-underline-offset:4px; }
    .backTop{
      display:inline-flex;
      margin-top:18px;
      color:var(--muted2);
      font-weight:800;
    }