:root{
    --ink:#0E1116;
    --ink-soft:#171B22;
    --paper:#F7F8FA;
    --white:#FFFFFF;
    --ultra:#2B4CFF;
    --ultra-bright:#5B7BFF;
    --grey:#5B6472;
    --grey-light:#8A919E;
    --line:#DDE1E7;
    --line-dark:#262B34;
    --card-light:#EEF0F4;
    --radius:14px;
    --maxw:1180px;
    --disp:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --body:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  section{padding:120px 32px;}
  .wrap{max-width:var(--maxw); margin:0 auto;}
  .dark{background:var(--ink); color:var(--paper);}
  .light{background:var(--paper); color:var(--ink);}
  .alt{background:var(--white); color:var(--ink);}

  h1,h2,h3{font-family:var(--disp); font-weight:700; letter-spacing:-0.01em; line-height:1.08;}
  h2{font-size:clamp(28px,4vw,42px); margin-bottom:16px;}
  h3{font-size:19px; font-weight:600;}
  p{color:var(--grey);}
  .dark p{color:var(--grey-light);}
  .lede{font-size:16px; color:var(--grey); max-width:640px; margin-bottom:56px;}
  .dark .lede{color:var(--grey-light);}

  .eyebrow{
    font-family:var(--mono); font-size:13px; font-weight:500;
    color:var(--ultra); letter-spacing:0.02em; margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
  }
  .dark .eyebrow{color:var(--ultra-bright);}
  .eyebrow .idx{color:var(--grey-light); opacity:.8; margin-right:10px;}
  .eyebrow::after{
    content:""; display:inline-block; width:7px; height:1em; background:currentColor;
    margin-left:1px; vertical-align:text-bottom; animation:blinkCursor 1.1s steps(1) infinite;
  }
  @keyframes blinkCursor{0%,49%{opacity:1;} 50%,100%{opacity:0;}}

  /* ---------- Nav ---------- */
  nav{
    position:sticky; top:0; z-index:100;
    background:rgba(247,248,250,0.86); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .navwrap{
    max-width:var(--maxw); margin:0 auto; padding:16px 32px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .brand{display:flex; align-items:center; font-family:var(--disp); font-weight:700; font-size:17px; letter-spacing:0.02em;}
  .brand svg{width:30px; height:30px; margin-right:10px;}
  .navlinks{display:flex; font-size:14px; font-weight:500;}
  .navlinks li{margin-right:32px;}
  .navlinks a{color:var(--grey); transition:color .15s;}
  .navlinks a:hover, .navlinks a:focus-visible{color:var(--ink);}
  .btn{
    font-family:var(--body); font-weight:600; font-size:14px;
    padding:11px 22px; border-radius:999px; display:inline-block;
    transition:transform .15s ease, background .15s ease, opacity .15s ease;
  }
  .btn-primary{background:var(--ultra); color:var(--white);}
  .btn-primary:hover{transform:translateY(-1px); background:#2340e0;}
  .btn-ghost{border:1px solid var(--line); color:var(--ink);}
  .dark .btn-ghost{border-color:var(--line-dark); color:var(--paper);}
  .btn-ghost:hover{border-color:var(--ultra); color:var(--ultra);}
  .navcta{display:flex; align-items:center; gap:14px;}
  .navToggle{display:none; flex-direction:column; background:none; border:none; cursor:pointer; padding:6px;}
  .navToggle span{width:22px; height:2px; background:var(--ink); display:block; margin-top:5px;}
  .navToggle span:first-child{margin-top:0;}

  /* ---------- Hero ---------- */
  .hero{padding-top:96px; padding-bottom:96px; overflow:hidden;}
  .herogrid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:64px; align-items:center;}
  .herokicker{
    font-family:var(--mono); font-size:12.5px; color:var(--ultra-bright);
    letter-spacing:0.08em; margin-bottom:26px; font-weight:500;
  }
  .hero h1{font-size:clamp(34px,5vw,54px); margin-bottom:22px;}
  .hero h1 .accent{color:var(--ultra-bright);}
  .hero .sub{font-size:clamp(18px,2vw,22px); color:var(--grey-light); font-family:var(--disp); font-weight:600; margin-bottom:32px;}
  .pills{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px;}
  .pill{
    font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:0.03em;
    padding:9px 16px; border-radius:999px; border:1px solid var(--ultra);
    background:var(--ink-soft); color:var(--paper);
  }
  .herobtns{display:flex; gap:14px; flex-wrap:wrap;}

  .markstage{display:flex; flex-direction:column; align-items:center; gap:18px;}
  .markbox{
    width:220px; height:220px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; border:none; background:none; padding:0;
  }
  .markbox svg{width:190px; height:190px; transition:transform .55s cubic-bezier(.65,0,.35,1);}
  .markbox.rotated svg{transform:rotate(90deg);}

  /* line-draw entrance, plays once on page load */
  .mline-v{stroke-dasharray:132; stroke-dashoffset:0;}
  .mline-d{stroke-dasharray:187; stroke-dashoffset:0;}
  .mline1{animation:drawV .6s ease-out both;}
  .mline2{animation:drawD .8s ease-out .2s both;}
  .mline3{animation:drawV .6s ease-out .65s both;}
  @keyframes drawV{from{stroke-dashoffset:132;} to{stroke-dashoffset:0;}}
  @keyframes drawD{from{stroke-dashoffset:187;} to{stroke-dashoffset:0;}}
  .markcaption{font-family:var(--mono); font-size:12px; color:var(--grey-light); text-align:center; min-height:18px;}
  .markcaption b{color:var(--ultra-bright); font-weight:600;}
  .markhint{font-family:var(--mono); font-size:11px; color:var(--grey-light); opacity:.7;}

  /* ---------- Cards generic ---------- */
  .grid{display:grid; gap:24px;}
  .grid-3{grid-template-columns:1fr 1fr 1fr;}
  .grid-2{grid-template-columns:1fr 1fr;}
  .grid-4{grid-template-columns:1fr 1fr 1fr 1fr;}
  .card{
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
    padding:30px; transition:box-shadow .2s ease, transform .2s ease;
  }
  .card:hover{box-shadow:0 12px 30px -14px rgba(14,17,22,0.18); transform:translateY(-2px);}
  .dark .card{background:var(--ink-soft); border-color:var(--line-dark);}
  .card .mark{width:34px; height:34px; border-radius:9px; background:var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
  .card .mark svg{width:18px; height:18px;}
  .card h3{margin-bottom:10px;}
  .card p{font-size:13.5px;}

  .num-badge{
    width:32px; height:32px; border-radius:50%; background:var(--ultra); color:var(--white);
    display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:700; font-size:13px;
    flex-shrink:0; margin-right:14px;
  }

  /* ---------- Process ---------- */
  .proc{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:0; position:relative;}
  .procstep{padding-right:28px; position:relative;}
  .procstep:not(:last-child)::after{
    content:"→"; position:absolute; right:0; top:2px; color:var(--grey-light); font-family:var(--mono); font-size:16px;
  }
  .procnum{font-family:var(--disp); font-size:38px; font-weight:700; color:var(--line);}
  .procstep.final .procnum{color:var(--ultra);}
  .procstep h3{margin:14px 0 12px; padding-bottom:14px; border-bottom:1px solid var(--line);}
  .procstep p{font-size:13.5px;}

  /* ---------- Capability tiles ---------- */
  .tile{display:flex; gap:14px; align-items:flex-start;}
  .tile .mark{margin-bottom:0; flex-shrink:0;}
  .tile h3{font-size:15px; margin-bottom:6px;}
  .tile p{font-size:13px;}

  /* ---------- Case studies ---------- */
  .casetag{
    display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:500;
    letter-spacing:0.03em; color:var(--ultra); background:var(--card-light);
    padding:6px 12px; border-radius:8px; margin-bottom:18px;
  }
  .caselabel{font-family:var(--mono); font-size:10.5px; color:var(--grey-light); letter-spacing:0.03em; margin-bottom:5px; text-transform:uppercase;}
  .casebody{margin-bottom:16px;}
  .casebody p{font-size:13px; color:var(--ink); opacity:.82;}
  .caseresult{border-top:1px solid var(--line); padding-top:14px; margin-top:4px;}
  .caseresult p{color:var(--ultra); font-weight:600; font-size:13px;}
  .casenote{
    font-size:14px; color:var(--grey-light); font-style:italic; margin-bottom:40px; max-width:640px;
  }

  /* ---------- Stack ---------- */
  .stackcard p.desc{font-size:13px; margin-bottom:16px;}
  .stackitems{font-family:var(--mono); font-size:11px; color:var(--grey-light); border-top:1px solid var(--line); padding-top:14px;}
  .dark .stackitems{border-color:var(--line-dark);}

  /* ---------- Collab columns ---------- */
  .collabcol h3{margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--line);}
  .collablist li{
    padding:10px 0 10px 20px; position:relative;
  }
  .collablist li::before{
    content:""; position:absolute; left:0; top:16px; width:6px; height:6px; background:var(--ultra);
  }
  .collablist .term{display:block; font-weight:600; color:var(--ink); font-size:13.5px; margin-bottom:3px;}
  .collablist .desc{display:block; font-size:12px; color:var(--grey); line-height:1.42;}

  /* ---------- Closing ---------- */
  .closing{text-align:left;}
  .closing h2{font-size:clamp(30px,4.5vw,44px); margin-bottom:14px;}
  .motto{font-family:var(--disp); font-size:clamp(20px,2.6vw,26px); font-weight:700; margin-bottom:36px;}
  .motto .fade{color:var(--grey-light); font-weight:600;}
  .motto .pop{color:var(--ultra-bright);}
  .contactrow{display:flex; align-items:center; flex-wrap:wrap; margin-top:36px;}
  .emaillink{font-family:var(--mono); font-size:18px; font-weight:500; color:var(--paper); border-bottom:2px solid var(--ultra); padding-bottom:2px; margin-right:22px;}
  .copybtn{
    font-family:var(--mono); font-size:11.5px; color:var(--grey-light); background:none; border:1px solid var(--line-dark);
    padding:8px 14px; border-radius:8px; cursor:pointer; transition:border-color .15s, color .15s;
  }
  .copybtn:hover{border-color:var(--ultra); color:var(--paper);}

  footer{padding:40px 32px; border-top:1px solid var(--line-dark); background:var(--ink);}
  .footwrap{max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
  .footbrand{display:flex; align-items:center; font-family:var(--mono); font-size:12px; color:var(--grey-light);}
  .footbrand svg{width:18px; height:18px; margin-right:9px;}
  footer .footlinks{display:flex; font-family:var(--mono); font-size:12px; color:var(--grey-light);}
  footer .footlinks a{margin-left:22px;}
  footer .footlinks a:hover{color:var(--paper);}

  /* content is always visible by default — hiding only happens if JS explicitly arms it below */
  .reveal{opacity:1;}
  html.reveal-armed .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
  html.reveal-armed .reveal.in{opacity:1; transform:none;}

  /* ---------- Responsive ---------- */
  @media (max-width:920px){
    .herogrid{grid-template-columns:1fr; gap:48px;}
    .markstage{order:-1;}
    .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
    .proc{grid-template-columns:repeat(2,1fr); gap:36px 24px;}
    .procstep:not(:last-child)::after{display:none;}
    .navlinks{display:none;}
    .navToggle{display:flex;}
  }
  @media (max-width:640px){
    section{padding:80px 20px;}
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
    .proc{grid-template-columns:1fr;}
    .navcta .btn-ghost{display:none;}
    .contactrow{flex-direction:column; align-items:flex-start;}
  }

  @media (prefers-reduced-motion:reduce){
    *{transition:none !important; animation:none !important; scroll-behavior:auto !important;}
  }

  :focus-visible{outline:2px solid var(--ultra); outline-offset:3px;}
/* ============================================================
   MULTI-PAGE ADDITIONS — sub-page header, detail lists, closing CTA
   ============================================================ */
.navlinks a.active{color:var(--ink);}
.dark .navlinks a.active{color:var(--paper);}

.pagehead{background:var(--ink); color:var(--paper); padding:180px 32px 90px;}
.pagehead .wrap{max-width:var(--maxw); margin:0 auto;}
.backlink{
  font-family:var(--mono); font-size:12.5px; color:var(--grey-light);
  display:inline-block; margin-bottom:28px; transition:color .15s;
}
.backlink:hover{color:var(--ultra-bright);}
.pagehead h1{font-size:clamp(32px,4.5vw,50px); margin-bottom:18px; max-width:820px;}
.pagehead .lede{color:var(--grey-light); font-size:17px; max-width:640px; margin-bottom:0;}
.pagehead .pills{margin-top:32px; margin-bottom:0;}

.detail-list{margin-top:18px; padding-top:16px; border-top:1px solid var(--line);}
.dark .detail-list{border-color:var(--line-dark);}
.detail-list li{
  font-size:13px; padding:6px 0 6px 18px; position:relative; color:var(--grey);
}
.dark .detail-list li{color:var(--grey-light);}
.detail-list li::before{
  content:""; position:absolute; left:0; top:13px; width:5px; height:5px; background:var(--ultra);
}

.note-block{
  border-top:1px solid var(--line); margin-top:16px; padding-top:14px;
}
.note-block .caselabel{margin-bottom:4px;}
.note-block p{font-size:12.5px; color:var(--grey-light); font-family:var(--mono);}

.stepdetail{
  background:var(--card-light); border-radius:10px; padding:16px 18px; margin-top:16px;
}
.stepdetail .caselabel{margin-bottom:6px;}
.stepdetail p{font-size:12.5px; color:var(--grey); margin:0;}

.svc-card{padding:34px;}
.svc-card h3{font-size:21px; margin-bottom:10px;}
.svc-card > p{font-size:14px; margin-bottom:6px;}

.collabcol p.colexpl{font-size:12.5px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}

.closing-cta{
  background:var(--ink); color:var(--paper); padding:100px 32px; text-align:left;
}
.closing-cta .wrap{max-width:var(--maxw); margin:0 auto;}
.closing-cta h2{font-size:clamp(26px,4vw,38px); margin-bottom:14px;}

.sitehub{display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px;}
.hubcard{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; transition:box-shadow .2s ease, transform .2s ease; display:block;
}
.hubcard:hover{box-shadow:0 12px 30px -14px rgba(14,17,22,0.18); transform:translateY(-2px);}
.hubcard .mark{width:34px; height:34px; border-radius:9px; background:var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.hubcard .mark svg{width:18px; height:18px;}
.hubcard h3{margin-bottom:8px; color:var(--ink);}
.hubcard p{font-size:13.5px; margin-bottom:14px;}
.hubcard .golink{font-family:var(--mono); font-size:12px; color:var(--ultra); font-weight:500;}

@media (max-width:920px){
  .sitehub{grid-template-columns:1fr 1fr;}
  .pagehead{padding:150px 24px 70px;}
}
@media (max-width:640px){
  .sitehub{grid-template-columns:1fr;}
}

/* ============================================================
   INDUSTRY ACCORDION (native <details>/<summary> — no JS needed,
   content is always in the DOM and readable even collapsed)
   ============================================================ */
.industry-acc{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--white);
  margin-top:16px; overflow:hidden;
}
.industry-acc summary{
  list-style:none; cursor:pointer; padding:22px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--disp); font-weight:600; font-size:16.5px; color:var(--ink);
}
.industry-acc summary::-webkit-details-marker{display:none;}
.industry-acc summary::after{
  content:"+"; font-family:var(--mono); font-size:20px; font-weight:400; color:var(--ultra);
  transition:transform .2s ease; flex-shrink:0;
}
.industry-acc[open] summary::after{transform:rotate(45deg);}
.industry-acc .acc-body{padding:0 28px 22px;}
.industry-acc ul{margin:0;}
.industry-acc li{
  font-size:13.5px; color:var(--grey); padding:12px 0 12px 20px; position:relative;
  border-top:1px solid var(--line); line-height:1.4;
}
.industry-acc li::before{
  content:""; position:absolute; left:0; top:19px; width:6px; height:6px; background:var(--ultra);
}

/* ============================================================
   VERTICAL PAGE — body paragraphs + regulatory/compliance callouts
   ============================================================ */
.industry-acc .acc-body p{
  font-size:14px; color:var(--grey); line-height:1.6; margin:14px 0;
}
.industry-acc .acc-body p:first-child{margin-top:18px;}
.vert-note{
  border-left:3px solid var(--ultra); background:var(--card-light);
  padding:14px 18px !important; border-radius:0 8px 8px 0;
  font-size:13px !important; color:var(--grey) !important;
}