:root{
    color-scheme: dark;
    --void:#090B0F;
    --deep:#0D1016;
    --surf:#12161E;
    --surf-2:#181D27;
    --surf-3:#1F2531;
    --edge:#28303D;
    --edge-2:#1C232E;
    --ink:#F3F6F9;
    --ink-2:#9AA7B7;
    --ink-3:#6A7888;
    --cyan:#2FD4E0;
    --cyan-dim:#1B8F99;
    --signal:#FF6B2C;
    --signal-dim:#B34718;
    --notch:18px;
  }
  *{box-sizing:border-box}
  html,body{overflow-x:clip}
  body{
    margin:0; background:var(--void); color:var(--ink);
    font-family:Figtree,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}
  p{margin:0}
  h1,h2,h3,h4{margin:0; font-family:Archivo,"Helvetica Neue",sans-serif; font-weight:800; line-height:1.02; letter-spacing:-.025em; text-wrap:balance}
  h3,h4{font-weight:700; letter-spacing:-.018em}
  .wrap{width:100%; max-width:1280px; margin-inline:auto; padding-inline:22px}
  .eyebrow{font-family:"DM Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan)}
  .eyebrow.warm{color:var(--signal)}
  .notch{clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%)}
  .notch-bl{clip-path:polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)))}
  :focus-visible{outline:2px solid var(--cyan); outline-offset:3px}
  [hidden]{display:none !important}

  /* ============ utility + floating nav ============ */
  .util{background:var(--void); border-bottom:1px solid var(--edge-2)}
  .util-in{display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:flex-end; align-items:center; padding-block:7px;
    font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
  .util-in a{text-decoration:none}
  .util-in a:hover{color:var(--cyan)}
  .util-in .trust{color:var(--cyan); display:inline-flex; align-items:center; gap:7px}
  .util-in .trust::before{content:""; width:6px; height:6px; background:var(--cyan); border-radius:50%}

  .navhold{position:sticky; top:calc(env(safe-area-inset-top,0px) + 10px); z-index:200; margin-top:12px}
  .navbar{
    width:100%; max-width:1280px; margin-inline:auto; background:rgba(18,22,30,.94); backdrop-filter:blur(16px);
    border:1px solid var(--edge); display:flex; align-items:center; gap:24px; padding:0 22px; height:60px;
    clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  }
  .logo{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto}
  .logo img{width:30px; height:30px; display:block}
  .logo b{font-family:Archivo,sans-serif; font-weight:800; font-size:17.5px; letter-spacing:.17em}
  /* the lockup asset carries its own padding, so a 44px box gives about
     30px of ink with 15px of clear space inside the 60px bar */
  .logo.lockup img{width:auto; height:44px; display:block}
  .logo.footmark img{width:auto; height:50px; display:block}
  @media (max-width:1200px){ .logo.lockup img{height:38px} }
  @media (max-width:560px){ .logo.lockup img{height:32px} .navcta{display:none} }
  @media (max-width:560px){ .logo.footmark img{height:42px} }
  .nav{display:flex; align-items:center; gap:4px}
  .nav > a, .nav > button{
    font-family:Figtree,sans-serif; font-size:14.5px; font-weight:500; color:var(--ink-2);
    background:none; border:0; padding:9px 12px; cursor:pointer; text-decoration:none; letter-spacing:.005em;
  }
  .nav > a:hover, .nav > button:hover, .nav > button[aria-expanded="true"]{color:var(--cyan)}
  .nav .caret{display:inline-block; width:0; height:0; margin-left:6px; vertical-align:middle;
    border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid currentColor}
  .navcta{
    background:var(--signal); color:#1A0800; font-family:Archivo,sans-serif; font-weight:700; font-size:13px;
    letter-spacing:.02em; padding:11px 17px; text-decoration:none; white-space:nowrap;
    clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
  }
  .navcta:hover{background:var(--ink); color:var(--void)}
  .burger{display:none; background:none; border:0; color:var(--ink); font-size:22px; padding:8px 10px; cursor:pointer}

  .mega{
    position:absolute; left:0; right:0; top:calc(100% + 8px); max-width:1280px; margin-inline:auto;
    background:var(--surf-2); border:1px solid var(--edge); padding:26px 22px 28px;
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px;
    clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  }
  .mega h4{font-family:"DM Mono",monospace; font-weight:400; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px}
  .mega > div:first-child h4{color:var(--signal)}
  .mega ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
  .mega a{text-decoration:none; font-size:14.5px; color:var(--ink-2); display:block}
  .mega a:hover{color:var(--cyan)}
  .mega a b{display:block; color:var(--ink); font-weight:600; font-size:15px}
  .mega a:hover b{color:var(--cyan)}
  .mega a span{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.08em; color:var(--ink-3)}
  @media (max-width:1080px){
    .nav{display:none}
    .burger{display:block}
    .mega{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:620px){ .mega{grid-template-columns:1fr; max-height:70vh; overflow-y:auto} }
  .navwrap{position:relative}

  /* ============ buttons ============ */
  .btn{
    display:inline-flex; align-items:center; gap:10px; font-family:Archivo,sans-serif; font-weight:700;
    font-size:14px; letter-spacing:.01em; padding:14px 22px; text-decoration:none; border:1px solid transparent;
    clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  }
  .btn-signal{background:var(--signal); color:#1A0800}
  .btn-signal:hover{background:var(--ink); color:var(--void)}
  .btn-cyan{background:var(--cyan); color:#04191C}
  .btn-cyan:hover{background:var(--ink); color:var(--void)}
  .btn-line{border-color:var(--edge); color:var(--ink); background:var(--surf)}
  .btn-line:hover{border-color:var(--cyan); color:var(--cyan)}
  .arrowlink{
    display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-family:Archivo,sans-serif;
    font-weight:700; font-size:13.5px; color:var(--signal); letter-spacing:.01em;
  }
  .arrowlink::after{content:"→"; transition:transform .18s ease}
  .arrowlink:hover::after{transform:translateX(4px)}
  .arrowlink.cy{color:var(--cyan)}

  /* ============ hero ============ */
  .hero{position:relative; margin-top:-70px; padding-top:70px; overflow:hidden; border-bottom:1px solid var(--edge-2)}
  #lensfield{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0}
  .hero::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(100deg, var(--void) 4%, rgba(9,11,15,.88) 34%, rgba(9,11,15,.34) 56%, rgba(9,11,15,.06) 78%, rgba(9,11,15,.4) 100%);
  }
  .hero-in{position:relative; z-index:2; padding-block:clamp(20px,2.2vw,32px) clamp(30px,3.4vw,46px)}
  .hero h1{font-size:clamp(33px,4.7vw,57px); max-width:19ch}
  .hero h1 i{font-style:normal; color:var(--cyan)}
  .hero .sub{margin-top:20px; color:var(--ink-2); font-size:clamp(16px,1.5vw,19px); max-width:54ch}
  .hero .acts{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
  .hero .stamp{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:26px; font-family:"DM Mono",monospace;
    font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
  .hero .stamp b{color:var(--ink-2); font-weight:400}

  /* the no-cost gap analysis is the offer that opens the conversation, so it
     gets its own block rather than a line in the credential strip */
  .offer{
    margin-top:26px; max-width:52ch; background:var(--surf-2);
    border:1px solid var(--edge); border-left:3px solid var(--signal);
    padding:16px 20px 17px;
  }
  .offer .flag{
    display:inline-block; font-family:"DM Mono",monospace; font-size:9.5px; letter-spacing:.18em;
    text-transform:uppercase; color:#1A0800; background:var(--signal); padding:3px 8px; margin-bottom:11px;
  }
  .offer strong{display:block; font-family:Archivo,sans-serif; font-weight:700; font-size:19px;
    letter-spacing:-.015em; color:var(--ink); line-height:1.15}
  .offer p{margin-top:8px; font-size:14.5px; color:var(--ink-2)}

  /* ============ generic section ============ */
  .sec{padding-block:clamp(24px,2.6vw,38px)}
  .sec.alt{background:var(--deep); border-block:1px solid var(--edge-2)}
  .sechead{display:flex; flex-wrap:wrap; gap:18px 40px; align-items:flex-end; justify-content:space-between; margin-bottom:34px}
  .sechead h2{font-size:clamp(27px,3.6vw,46px); max-width:17ch}
  .sechead .aside{color:var(--ink-2); max-width:38ch; font-size:15.5px}

  /* ============ sector cards ============ */
  .sectors{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
  .sector{
    position:relative; background:var(--surf); border:1px solid var(--edge-2); padding:24px 22px 26px;
    display:flex; flex-direction:column; gap:12px; text-decoration:none; min-height:230px; overflow:hidden;
  }
  .sector::before{content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:var(--edge)}
  .sector{transition:background .18s ease, border-color .18s ease}
  .sector::before{transition:background .18s ease}
  .sector:hover{border-color:var(--edge); background:var(--surf-2)}
  .sector:hover::before{background:var(--signal)}
  .sector.lead{background:var(--surf-2); border-color:var(--edge)}
  .sector.lead::before{background:var(--signal)}
  .sector h3{font-size:22px}
  .sector p{font-size:14.5px; color:var(--ink-2)}
  .sector .ags{margin-top:auto; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); line-height:1.9}
  @media (max-width:1040px){ .sectors{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .sectors{grid-template-columns:1fr} }

  /* ============ figures ============ */
  .figs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--edge-2); border:1px solid var(--edge-2)}
  .fig{background:var(--deep); padding:22px 20px}
  .fig b{display:block; font-family:Archivo,sans-serif; font-weight:800; font-size:clamp(26px,3.4vw,40px); color:var(--ink); letter-spacing:-.035em; font-variant-numeric:tabular-nums}
  .fig b em{font-style:normal; color:var(--signal)}
  .fig span{display:block; font-size:13.5px; color:var(--ink-2); margin-top:8px; line-height:1.45}
  @media (max-width:820px){ .figs{grid-template-columns:repeat(2,1fr)} }

  /* ============ practice split ============ */
  .practice{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,3.6vw,56px); align-items:start}
  .plist{display:flex; flex-direction:column; gap:12px}
  .prow{
    background:var(--surf); border:1px solid var(--edge-2); padding:22px 24px; text-decoration:none;
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center;
  }
  .prow:hover{border-color:var(--cyan); background:var(--surf-2)}
  .prow h3{font-size:20px}
  .prow p{font-size:14.5px; color:var(--ink-2); margin-top:8px}
  .prow .ix{font-family:"DM Mono",monospace; font-size:10.5px; color:var(--ink-3); letter-spacing:.1em}
  .prow .chev{font-family:Archivo,sans-serif; color:var(--signal); font-size:18px}
  @media (max-width:900px){ .practice{grid-template-columns:1fr} }

  /* ============ partner ============ */
  .partner{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,3.6vw,52px); align-items:center}
  .partner-panel{background:var(--surf-2); border:1px solid var(--edge); padding:clamp(24px,3vw,38px)}
  /* the reversed partner mark sits straight on the dark panel, no plate */
  .partner-panel .plate{display:block; line-height:0}
  .partner-panel .plate img{width:auto; height:38px; display:block}
  @media (max-width:560px){ .partner-panel .plate img{height:32px} }
  .partner-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--edge); border:1px solid var(--edge); margin-top:24px}
  .ps{background:var(--surf-2); padding:16px 18px}
  .ps b{display:block; font-family:Archivo,sans-serif; font-weight:800; font-size:24px; color:var(--cyan); letter-spacing:-.03em}
  .ps span{display:block; font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.4}
  @media (max-width:880px){ .partner{grid-template-columns:1fr} }

  /* ============ trust center ============ */
  .trustband{background:linear-gradient(120deg,var(--surf-2),var(--deep) 70%); border:1px solid var(--edge); padding:clamp(24px,3.2vw,42px);
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px; align-items:center}
  .trustband h2{font-size:clamp(24px,3vw,36px); max-width:20ch}
  .trustband p{color:var(--ink-2); margin-top:14px; max-width:56ch}
  @media (max-width:820px){ .trustband{grid-template-columns:1fr} }

  /* ============ leadership ============ */
  .leaders{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
  .leader{background:var(--surf); border:1px solid var(--edge-2); padding:24px 22px 26px}
  .leader .mono, .leader .port{
    position:relative; width:100%; aspect-ratio:1/1; max-width:100%; overflow:hidden;
    border:1px solid var(--edge-2); margin-bottom:18px;
  }
  .leader .mono{
    background:
      radial-gradient(70% 90% at 28% 22%, rgba(47,212,224,.24), transparent 66%),
      repeating-linear-gradient(122deg, transparent 0 9px, rgba(47,212,224,.07) 9px 10px),
      var(--surf-2);
    display:grid; place-items:center;
  }
  .leader .mono b{font-family:Archivo,sans-serif; font-weight:800; font-size:34px; letter-spacing:.06em; color:var(--cyan); opacity:.85}
  .leader .port img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.88) contrast(1.04) brightness(.95)}
  /* settle the portrait into the dark page without washing the face out */
  .leader .port::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(47,212,224,.05) 0%, transparent 38%, rgba(9,11,15,.5) 100%);
  }
  .leader h3{font-size:20px}
  .leader .title{font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--signal); margin-top:8px}
  .leader p{font-size:14.5px; color:var(--ink-2); margin-top:13px}
  .leader .cr{margin-top:15px; font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.05em; color:var(--ink-3); line-height:1.95; text-transform:uppercase}
  @media (max-width:900px){ .leaders{grid-template-columns:1fr} }

  /* ============ insights ============ */
  .ins{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
  .inscard{background:var(--surf); border:1px solid var(--edge-2); padding:22px 20px 24px; text-decoration:none; display:flex; flex-direction:column; gap:11px}
  .inscard:hover{border-color:var(--cyan)}
  .inscard time{font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.09em; color:var(--ink-3)}
  .inscard h3{font-size:18.5px}
  .inscard p{font-size:14px; color:var(--ink-2)}
  .inscard .cat{margin-top:auto; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--signal)}
  @media (max-width:880px){ .ins{grid-template-columns:1fr} }

  /* ============ interior page bits ============ */
  .crumb{font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px}
  .crumb a{text-decoration:none}
  .crumb a:hover{color:var(--cyan)}
  .phero{position:relative; border-bottom:1px solid var(--edge-2); background:
      radial-gradient(70% 130% at 84% 30%, rgba(47,212,224,.13), transparent 62%),
      linear-gradient(180deg,var(--deep),var(--void)); overflow:hidden}
  .phero-in{position:relative; padding-block:clamp(18px,2vw,30px) clamp(30px,3.4vw,46px)}
  .phero h1{font-size:clamp(30px,4.6vw,56px); max-width:19ch}
  .phero h1 i{font-style:normal; color:var(--cyan)}
  .phero .sub{margin-top:18px; color:var(--ink-2); font-size:clamp(15.5px,1.4vw,18px); max-width:58ch}
  .phero .acts{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}

  .twocol{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,3.6vw,56px); align-items:start}
  @media (max-width:900px){ .twocol{grid-template-columns:1fr} }
  .prose h3{font-size:clamp(20px,2.3vw,27px); margin-top:30px}
  .prose h3:first-child{margin-top:0}
  .prose p{color:var(--ink-2); margin-top:14px; max-width:68ch}
  .prose ul{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; color:var(--ink-2); font-size:15.5px}
  .prose li{padding-left:20px; position:relative}
  .prose li::before{content:""; position:absolute; left:0; top:10px; width:9px; height:2px; background:var(--signal)}
  .prose strong{color:var(--ink); font-weight:600}
  .panel{background:var(--surf); border:1px solid var(--edge-2); padding:24px 22px}
  .panel h4{font-size:17px; margin-bottom:6px}
  .panel dl{margin:16px 0 0; display:flex; flex-direction:column; gap:13px}
  .panel dt{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
  .panel dd{margin:5px 0 0; font-size:14.5px; color:var(--ink-2)}
  .panel dd b{color:var(--ink); font-weight:600}

  table.data{width:100%; border-collapse:collapse; font-size:14.5px; margin-top:18px}
  table.data th{text-align:left; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.13em; text-transform:uppercase;
    color:var(--ink-3); font-weight:400; padding:12px 14px 12px 0; border-bottom:1px solid var(--edge)}
  table.data td{padding:12px 14px 12px 0; border-bottom:1px solid var(--edge-2); color:var(--ink-2); vertical-align:top}
  table.data td:first-child{color:var(--ink); font-weight:600; white-space:nowrap}
  .tablewrap{overflow-x:auto}

  .pkgs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
  .pkg{background:var(--surf); border:1px solid var(--edge-2); padding:24px 20px 26px; display:flex; flex-direction:column; gap:13px;
    transition:background .18s ease, border-color .18s ease}
  .pkg:hover{background:var(--surf-2); border-color:var(--edge)}
  .pkg.on{background:var(--surf-2); border-color:var(--signal)}
  .pkg h3{font-size:22px}
  .pkg .who{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--cyan)}
  .pkg ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14px; color:var(--ink-2)}
  .pkg li{display:flex; gap:9px}
  .pkg li::before{content:""; flex:0 0 5px; height:5px; margin-top:8px; background:var(--cyan)}
  .pkg .arrowlink{margin-top:auto}
  @media (max-width:1040px){ .pkgs{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .pkgs{grid-template-columns:1fr} }

  .comps{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--edge-2); border:1px solid var(--edge-2)}
  .comp{background:var(--surf); padding:22px 18px}
  .comp .n{font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.12em; color:var(--ink-3)}
  .comp h3{font-size:16px; margin:11px 0 9px}
  .comp p{font-size:13.5px; color:var(--ink-2); line-height:1.5}
  @media (max-width:980px){ .comps{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:540px){ .comps{grid-template-columns:1fr} }

  /* ============ CTA + footer ============ */
  .endcta{background:var(--surf-2); border:1px solid var(--edge); padding:clamp(26px,3.4vw,46px);
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px; align-items:center}
  .endcta h2{font-size:clamp(24px,3vw,36px); max-width:21ch}
  .endcta p{color:var(--ink-2); margin-top:13px; max-width:54ch}
  @media (max-width:820px){ .endcta{grid-template-columns:1fr} }

  footer{border-top:1px solid var(--edge-2); padding-block:40px 30px; background:var(--deep)}
  .foot{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr)); gap:26px}
  .foot h4{font-family:"DM Mono",monospace; font-weight:400; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:13px}
  .foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px}
  .foot a{color:var(--ink-2); text-decoration:none}
  .foot a:hover{color:var(--cyan)}
  .foot p{color:var(--ink-2); font-size:14.5px}
  .footbase{
    margin-top:36px; padding-top:22px; border-top:1px solid var(--edge-2); text-align:center;
    font-family:"DM Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.06em; color:var(--ink-3);
  }
  .footbase p{margin:0}
  .footbase p + p{margin-top:8px}
  .footbase .sep{color:var(--edge); margin:0 4px}
  .linkbtn{
    background:none; border:0; padding:0; cursor:pointer; font:inherit; color:var(--ink-2);
    text-decoration:underline; text-underline-offset:3px;
  }
  .linkbtn:hover{color:var(--cyan)}
  @media (max-width:980px){ .foot{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .foot{grid-template-columns:1fr} }
  .mocknote{margin-top:16px; font-family:Figtree,sans-serif; font-size:12px; letter-spacing:0; text-transform:none; color:var(--ink-3)}


/* ---- multi-page additions ------------------------------------------------ */
.mocknote[hidden]{display:none !important}
main{display:block}

/* index listings: insights archive, article rows */
.lines{display:flex; flex-direction:column}
.ln{
  display:grid; grid-template-columns:120px minmax(0,1fr) 130px; gap:22px; padding-block:19px;
  border-top:1px solid var(--edge-2); text-decoration:none; align-items:baseline;
}
.ln:last-of-type{border-bottom:1px solid var(--edge-2)}
.ln:hover{background:var(--surf)}
.ln time{font-family:"DM Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.09em; color:var(--ink-3)}
.ln h3{font-size:19px; font-weight:700; font-family:Figtree,sans-serif; letter-spacing:-.005em; line-height:1.3}
.ln:hover h3{color:var(--cyan)}
.ln .cat{
  font-family:"DM Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--signal); text-align:right;
}
@media (max-width:760px){ .ln{grid-template-columns:1fr; gap:6px} .ln .cat{text-align:left} }

/* ============ contact form ============ */
.cform{display:flex; flex-direction:column; gap:17px}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:17px}
@media (max-width:620px){ .fgrid{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; min-width:0}
.field > label{
  font-family:"DM Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:8px;
}
.field > label .req{color:var(--signal); margin-left:3px}
.field input, .field select, .field textarea{
  width:100%; background:var(--void); color:var(--ink);
  border:1px solid var(--edge); border-radius:0;
  padding:12px 13px; font-family:Figtree,sans-serif; font-size:15px; line-height:1.5;
  transition:border-color .18s ease, background .18s ease;
}
.field textarea{resize:vertical; min-height:148px}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-3)}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--cyan); background:var(--surf);
}
.field select{
  appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%236A7888' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:11px;
}
.field select option{background:var(--surf-2); color:var(--ink)}
.field .has-error{border-color:var(--signal)}
.form-error{
  font-family:"DM Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.06em;
  color:var(--signal); margin-top:7px; min-height:1px;
}
.form-error:empty{display:none}
.cform button[type="submit"]{
  align-self:flex-start; cursor:pointer; margin-top:3px;
  font-family:Archivo,sans-serif; font-weight:700; font-size:14px; letter-spacing:.01em;
}
.cform button[type="submit"]:disabled{opacity:.55; cursor:default}
.cform button[type="submit"]:disabled:hover{background:var(--signal); color:#1A0800}
.form-note{font-size:12px; color:var(--ink-3); line-height:1.7; margin-top:2px}
.form-note a{color:var(--ink-2)}
.form-done{
  border:1px solid var(--cyan-dim); background:var(--surf); padding:30px 26px;
}
.form-done p{color:var(--ink-2); margin-top:12px; max-width:56ch}
.form-error.submit-error{
  border-left:2px solid var(--signal); padding:9px 0 9px 12px; margin-top:4px; font-size:11.5px;
}

/* numbered sequence, used for "what happens next" */
.steps{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:15px; counter-reset:step}
.steps li{
  position:relative; padding-left:32px; counter-increment:step;
  color:var(--ink-2); font-size:14.5px; line-height:1.65;
}
.steps li::before{
  content:counter(step,decimal-leading-zero); position:absolute; left:0; top:3px;
  font-family:"DM Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.1em; color:var(--signal);
}

/* office address, links out to Google Maps. Keeps the colour of the text it
   sits in, so the footer address does not brighten past the lines beside it. */
.maplink{color:inherit; text-decoration:none}
.maplink:hover{color:var(--cyan); text-decoration:underline; text-underline-offset:3px}
.foot .maplink{color:inherit}
.foot .maplink:hover{color:var(--cyan)}

/* ============ article body ============ */
.prose h4{font-size:17px; margin-top:26px; color:var(--ink)}
.prose a{color:var(--cyan); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.prose a:hover{color:var(--ink)}
.prose ol{
  list-style:none; margin:16px 0 0; padding:0; counter-reset:pstep;
  display:flex; flex-direction:column; gap:11px; color:var(--ink-2); font-size:15.5px;
}
.prose ol li{padding-left:30px; counter-increment:pstep}
.prose ol li::before{
  content:counter(pstep,decimal-leading-zero); top:1px; width:auto; height:auto; background:none;
  font-family:"DM Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.1em; color:var(--signal);
}
.prose blockquote{
  margin:26px 0 0; padding:20px 0 20px 22px; border-left:2px solid var(--cyan);
  color:var(--ink); font-size:17px; line-height:1.6;
}
.prose blockquote p{color:inherit; margin-top:0}
.prose blockquote p + p{margin-top:12px}
.prose blockquote cite{
  display:block; margin-top:12px; font-style:normal;
  font-family:"DM Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.prose table.data{margin-top:20px}
.prose table.data td:first-child{white-space:normal}

/* inline call to action inside an article */
.artcta{background:var(--surf); border:1px solid var(--edge-2); padding:22px; margin-top:30px}
.artcta p{margin-top:0; font-size:15px}
.artcta .acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}

/* byline block that closes an article */
.byline{display:flex; gap:16px; align-items:flex-start; margin-top:34px; padding-top:24px; border-top:1px solid var(--edge-2)}
.byline img{
  width:96px; height:96px; flex:none; object-fit:cover; border-radius:50%;
  border:1px solid var(--edge); background:var(--surf-2);
}
.byline h4{margin:0; font-size:16px}
.byline .title{
  font-family:"DM Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--signal); margin-top:6px;
}
.byline p{margin-top:9px; font-size:14px; color:var(--ink-2); max-width:60ch}

/* ============ article hero, image led ============
   The artwork already carries the article title, so the visible h1 is dropped
   and kept for assistive tech and search engines with .vh. */
.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.ahero{
  position:relative; border-bottom:1px solid var(--edge-2); overflow:hidden;
  background:radial-gradient(70% 130% at 84% 30%, rgba(47,212,224,.10), transparent 62%),
             linear-gradient(180deg,var(--deep),var(--void));
}
.ahero-in{padding-block:clamp(18px,2vw,30px) clamp(28px,3.2vw,44px)}
.ahero-fig{margin:0; max-width:920px}
.ahero-fig img{
  display:block; width:100%; height:auto; border:1px solid var(--edge-2);
  clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.ameta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:20px;
  font-family:"DM Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
}
.ameta b{color:var(--ink-2); font-weight:400}
.ameta .cat{color:var(--signal)}
.ameta .dot{color:var(--edge)}
.ahero .sub{
  margin-top:18px; color:var(--ink-2); font-size:clamp(15.5px,1.4vw,18px); max-width:62ch;
}
@media (max-width:760px){ .ahero-fig{max-width:100%} }

/* ============ full width article layout ============ */
/* metadata bar, sits between the breadcrumb and the artwork */
.filedbar{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 0;
  background:var(--surf); border:1px solid var(--edge-2); padding:15px 20px; margin-bottom:22px;
}
.filedbar .grp{display:flex; align-items:baseline; gap:11px; min-width:0; padding-right:26px}
.filedbar .grp + .grp{border-left:1px solid var(--edge-2); padding-left:26px}
.filedbar .lab{
  font-family:"DM Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); flex:none;
}
.filedbar b{font-family:Archivo,sans-serif; font-weight:800; font-size:15px; color:var(--ink)}
.filedbar .arrowlink{font-size:13px}
.filedbar .spacer{margin-left:auto; padding:0; border:0}
@media (max-width:820px){
  .filedbar{flex-direction:column; align-items:flex-start; gap:13px}
  .filedbar .grp{padding-right:0}
  .filedbar .grp + .grp{border-left:0; padding-left:0}
  .filedbar .spacer{margin-left:0}
}

/* artwork runs the full grid width, on heroes opted in with .full */
.ahero.full .ahero-fig{max-width:none}

/* body runs the full grid width, margin to margin, nothing held back */
.artbody,
.artbody p, .artbody ul, .artbody ol,
.artbody h3, .artbody h4,
.artbody blockquote, .artbody aside{max-width:none}

/* close the gap between the hero and the first line of the article: the hero's
   bottom padding and the section's top padding were stacking to about 130px */
.ahero.full + .sec{padding-top:clamp(18px,1.9vw,28px)}
.artbody > :first-child{margin-top:0}

/* callouts carried over from the published articles */
.prose aside{
  background:var(--surf); border:1px solid var(--edge-2); border-left:2px solid var(--cyan);
  padding:20px 22px; margin-top:28px; max-width:74ch;
}
.prose aside h4{
  margin:0; font-family:"DM Mono",ui-monospace,monospace; font-weight:400; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);
}
.prose aside p{margin-top:12px; font-size:14.5px}
.prose aside ul{margin-top:13px; font-size:14.5px}
.prose aside > :last-child{margin-bottom:0}

/* Full width article: nothing nested in the body holds its own measure.
   Specificity is raised to .prose.artbody so this wins wherever it sits in
   the file, rather than relying on source order against .prose aside. */
.prose.artbody aside,
.prose.artbody aside p,
.prose.artbody aside ul,
.prose.artbody aside ol,
.prose.artbody blockquote,
.prose.artbody table{max-width:none}
.prose.artbody table.data{width:100%}

/* articles with no artwork keep a visible title, sized like a page hero.
   It runs the full grid width: capped at 19ch it wrapped to four lines down
   the left half and left the right half of the fold empty. */
.ahero h1:not(.vh){font-size:clamp(30px,4.6vw,56px); max-width:none; margin-top:4px}
.ahero h1 i{font-style:normal; color:var(--cyan)}
.ahero h1:not(.vh) + .sub{margin-top:20px}

/* deck runs the full grid width alongside the title */
.ahero.full .sub{max-width:none}

/* author card stacks and centres on narrow screens, as the live site does */
@media (max-width:560px){
  .byline{flex-direction:column; align-items:center; text-align:center}
  .byline img{width:84px; height:84px}
  .byline p{max-width:none}
}

/* ============ page hero artwork ============
   Same three layer stack the home hero uses: art at z0, a scrim at z1 so the
   copy stays legible over it, content at z2. Art is inline SVG rather than a
   raster so it carries the palette tokens and costs a couple of KB. */
/* run the artwork up behind the floating nav, the way the home hero does,
   so the gradient meets the top strip instead of stopping at the nav edge.
   The glow lives here rather than inside the svg: an svg only spans the
   right 58%, so a glow drawn inside it gets clipped at its own left edge
   and shows as a vertical seam across the hero. */
.phero.art{
  --gutter: max(0px, calc((100% - 1280px) / 2));
  --artw: min(56%, 700px);
  overflow:hidden; margin-top:-70px; padding-top:70px;
  /* the glow is centred on the artwork, so it tracks the grid rather than the
     viewport, and it lives here rather than in the svg so it has no hard edge */
  background:
    radial-gradient(64% 130% at calc(100% - var(--gutter) - 22px - var(--artw) / 2) 46%,
      rgba(47,212,224,.17), transparent 68%),
    linear-gradient(180deg,var(--deep),var(--void));
}
.heroart{
  /* The artwork belongs to the same 1280px grid the copy sits in. Pinned to the
     viewport edge it drifted further from the text the wider the screen got. */
  position:absolute; top:70px; height:calc(100% - 70px);
  right:calc(var(--gutter) + 22px);
  width:var(--artw);
  z-index:0; pointer-events:none; display:block;
}
.phero.art::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    var(--void) 2%, rgba(9,11,15,.92) 30%, rgba(9,11,15,.55) 52%,
    rgba(9,11,15,.15) 74%, rgba(9,11,15,.45) 100%);
}
.phero.art .phero-in{
  position:relative; z-index:2;
  padding-block:clamp(18px,2vw,30px) clamp(30px,3.4vw,46px);
}
/* the lockup carries the page identity here, so it sits tighter than an eyebrow */
.phero.art .fraas-mark{margin:10px 0 2px; width:min(100%,300px)}

@media (prefers-reduced-motion: reduce){
  .heroart .node{animation:none}
}
/* one component is lit at a time, stepping around the ring in a five point
   star order rather than sweeping. fill cascades from the group to the dot,
   the halo and the label together. */
.heroart .node{fill:var(--cyan); animation:heroStar 10s ease-in-out infinite}
@keyframes heroStar{
  0%, 100% {fill:#2FD4E0}   /* both ends cyan so the loop does not snap */
  7%       {fill:#FF6B2C}   /* 0.7s fade up   */
  20%      {fill:#FF6B2C}   /* hold 1.3s      */
  32%      {fill:#2FD4E0}   /* 1.2s fade down */
}
@media (prefers-reduced-motion: reduce){ .heroart .node{animation:none} }
/* close the gap under an artwork hero, the same way .ahero.full does on the
   article pages. The hero's own bottom border is the divider. */
.phero + .sec{padding-top:clamp(18px,1.9vw,28px)}

@media (max-width:900px){ .heroart{display:none} }

/* probe traces: a pulse runs the length of each route, each on its own timing
   so the paths read as independent attempts rather than one synchronised sweep */
.heroart .trace{
  stroke-dasharray: 20 var(--len);
  stroke-dashoffset: calc(var(--len) + 20px);
  animation: traceRun var(--dur, 5s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes traceRun{ to{ stroke-dashoffset: 0 } }
@media (prefers-reduced-motion: reduce){
  .heroart .trace{animation:none; stroke-dashoffset:0; stroke-dasharray:none; stroke-opacity:.18}
}

/* results coming home: once a run has passed through an agent, a short pulse
   runs back up the same channel the orchestrator tasked it down. Travel takes
   the first 42% of the cycle, then it hides until the next result is due. */
.heroart .ret{
  stroke-dasharray: 18 var(--len);
  animation: retRun var(--dur, 1s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes retRun{
  0%   {stroke-dashoffset: calc(var(--len) + 18px); opacity:1}
  42%  {stroke-dashoffset: 0; opacity:1}
  44%  {opacity:0}
  100% {stroke-dashoffset: 0; opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .heroart .ret{animation:none; opacity:.3; stroke-dasharray:none}
}

/* FRaaS lockup in the home hero, between the eyebrow and the headline */
.fraas-mark{
  display:block; width:min(100%,360px); height:auto; margin:14px 0 4px;
}
@media (max-width:620px){ .fraas-mark{width:min(100%,280px)} }

/* a page that opens with a section instead of a hero still needs the
   breadcrumb to land where every other page puts it */
main > .sec:first-child{padding-top:clamp(18px,2vw,30px)}

/* ============ leadership, horizontal tiles ============ */
.bios{display:flex; flex-direction:column; gap:16px}
.bio{
  display:grid; grid-template-columns:104px minmax(0,1fr); gap:28px; align-items:start;
  background:var(--surf); border:1px solid var(--edge-2); padding:26px 26px 28px;
}
/* portrait: small, notched to match the panels, with a vignette so faces sit
   into the dark ground instead of floating on it */
.bio .port{
  position:relative; width:104px; height:104px; overflow:hidden;
  border:1px solid var(--edge); background:var(--surf-2);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.bio .port img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.8) contrast(1.06) brightness(.9);
}
.bio .port::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(74% 74% at 50% 38%, transparent 38%, rgba(9,11,15,.62) 100%);
}
.bio .port.mono{display:flex; align-items:center; justify-content:center}
.bio .port.mono b{
  font-family:Archivo,sans-serif; font-weight:800; font-size:30px;
  letter-spacing:.06em; color:var(--cyan); opacity:.8;
}
.bio h3{font-size:22px}
.bio .title{
  font-family:"DM Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--signal); margin-top:7px;
}
.bio p{font-size:15px; color:var(--ink-2); margin-top:14px; max-width:78ch}
.bio .cr{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--edge-2);
  font-family:"DM Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.9;
}
.bio .cr b{color:var(--cyan); font-weight:400}
@media (max-width:760px){
  .bio{grid-template-columns:1fr; gap:18px}
}

/* ============ insights hero: the latest piece, featured ============ */
.phero.feature .phero-in{padding-bottom:clamp(30px,3.4vw,46px)}
.feat{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(26px,3.4vw,52px); align-items:center; margin-top:18px;
}
.feat h2{font-size:clamp(26px,3.4vw,42px); max-width:18ch; margin-top:14px}
.feat h2 i{font-style:normal; color:var(--cyan)}
.feat .sub{margin-top:16px; color:var(--ink-2); font-size:clamp(15px,1.35vw,17px); max-width:54ch}
.feat .ameta{margin-top:18px}
.feat .acts{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
.feat-img{display:block; position:relative; text-decoration:none}
.feat-img img{
  display:block; width:100%; height:auto; border:1px solid var(--edge-2);
  clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  transition:border-color .2s ease, filter .2s ease;
  filter:saturate(.94) brightness(.94);
}
.feat-img:hover img{border-color:var(--cyan); filter:saturate(1) brightness(1)}
.feat-img .flag{
  position:absolute; top:0; left:0; z-index:2;
  font-family:"DM Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:#1A0800; background:var(--signal); padding:5px 11px;
}
@media (max-width:860px){
  .feat{grid-template-columns:1fr}
  .feat-img{order:-1}
}

/* ============ modal: privacy statement ============ */
.modal{
  border:1px solid var(--edge); background:var(--surf); color:var(--ink); padding:0;
  width:min(92vw,760px); max-height:86vh; overflow:auto;
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.modal::backdrop{background:rgba(9,11,15,.82); backdrop-filter:blur(3px)}
.modal-in{padding:34px clamp(24px,4vw,44px) 40px; position:relative}
.modal-x{
  position:absolute; top:14px; right:18px; background:none; border:0; cursor:pointer;
  color:var(--ink-3); font-size:26px; line-height:1; padding:4px 8px;
}
.modal-x:hover{color:var(--signal)}
.modal-mark{display:block; width:auto; height:42px; margin-bottom:22px}
.modal h2{font-size:clamp(24px,3vw,34px)}
.modal-date{
  font-family:"DM Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--signal); margin-top:9px;
}
.modal-body{margin-top:24px; border-top:1px solid var(--edge-2); padding-top:22px}
.modal-body h3{font-size:15px; margin-top:26px; color:var(--ink)}
.modal-body h3:first-child{margin-top:0}
.modal-body p{color:var(--ink-2); font-size:14.5px; margin-top:11px; max-width:68ch}
.modal-body ul{list-style:none; margin:13px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.modal-body li{position:relative; padding-left:20px; color:var(--ink-2); font-size:14.5px}
.modal-body li::before{content:""; position:absolute; left:0; top:9px; width:9px; height:2px; background:var(--signal)}
.modal-body b{color:var(--ink); font-weight:600}
.modal-body a{color:var(--cyan); text-decoration:underline; text-underline-offset:3px}

/* anchored targets sit below the floating nav rather than under it */
:target, [id]{scroll-margin-top:124px}