
  :root{
    --paper:#F8F8F5;
    --ink:#16161A;
    --accent:#1A33CC;
    --line:#DCDCD6;
    --mute:#565651;
    --maxw:1600px;
    --gutter:clamp(20px,5vw,64px);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Hanken Grotesk",system-ui,sans-serif;
    font-size:18px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  a{color:inherit;text-decoration:none;}

  .mono{
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-size:12px;
    color:var(--mute);
  }
  .accent{color:var(--accent);}

  .wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding-left:var(--gutter);
    padding-right:var(--gutter);
  }

  /* ---------- top bar ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter:saturate(140%) blur(6px);
    border-bottom:1px solid var(--line);
  }
  .bar{
    display:flex;align-items:center;justify-content:space-between;
    gap:24px;min-height:64px;padding-block:20px;
  }
  .brand{
    font-family:"Archivo Expanded",sans-serif;
    font-weight:800;letter-spacing:.02em;font-size:18px;
    text-transform:uppercase;
  }
  .brand{display:inline-flex;align-items:center;}
  .brand-logo{height:34px;width:auto;display:block;}
  .foot-logo{height:48px;width:auto;display:block;margin-bottom:26px;opacity:.92;}
  nav.bar-nav{display:flex;gap:26px;}
  nav.bar-nav a{
    font-family:"IBM Plex Mono",monospace;
    text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;
    color:var(--mute);padding:4px 0;position:relative;
  }
  nav.bar-nav a:hover,nav.bar-nav a:focus-visible{color:var(--ink);}
  nav.bar-nav a::after{
    content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;
    background:var(--accent);transition:width .25s ease;
  }
  nav.bar-nav a:hover::after,nav.bar-nav a:focus-visible::after{width:100%;}
  .bar-coord{display:none;}
  @media(min-width:1200px){.bar-coord{display:block;}}
  .bar-actions{display:flex;align-items:center;gap:18px;}
  .cta{
    font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em;
    font-size:11.5px;color:var(--paper);background:var(--accent);
    padding:10px 16px;white-space:nowrap;transition:background .2s ease;
  }
  .cta:hover,.cta:focus-visible{background:#1126a3;}
  .menu-btn{display:none;background:none;border:0;cursor:pointer;width:38px;height:38px;padding:8px;}
  .menu-btn span{display:block;height:2px;width:100%;background:var(--ink);margin:4px 0;transition:transform .25s ease,opacity .2s ease;}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  .mobile-nav{display:none;flex-direction:column;border-top:1px solid var(--line);background:var(--paper);}
  .mobile-nav a{padding:15px var(--gutter);font-family:"IBM Plex Mono",monospace;text-transform:uppercase;
    letter-spacing:.08em;font-size:12px;color:var(--ink);border-bottom:1px solid var(--line);}
  .mobile-nav a:hover,.mobile-nav a:focus-visible{color:var(--accent);background:#F1F1EC;}
  .mobile-nav.open{display:flex;}
  @media(max-width:1024px){
    nav.bar-nav{display:none;}
    .menu-btn{display:block;}
  }
  @media(min-width:1025px){
    .mobile-nav{display:none!important;}
  }

  /* ---------- layout shell with index rail ---------- */
  main{position:relative;}
  .rail{
    display:none;
  }
  @media(min-width:1200px){
    
    
    .rail{
      display:block;position:fixed;left:max(24px,calc((100vw - var(--maxw))/2 + 24px));
      top:50%;transform:translateY(-50%);z-index:40;max-width:180px;
    }
    .rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
    .rail a{
      font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;
      text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:9px;
    }
    .rail a .tick{width:14px;height:1px;background:var(--line);transition:width .25s ease,background .25s ease;}
    .rail a:hover,.rail a:focus-visible{color:var(--ink);}
    .rail a.active{color:var(--ink);}
    .rail a.active .tick{width:26px;background:var(--accent);}
  }

  section{padding-block:clamp(72px,11vh,140px);border-bottom:1px solid var(--line);}
  .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:34px;}
  .eyebrow .num{color:var(--accent);font-weight:500;}
  .eyebrow .ln{flex:1;height:1px;background:var(--line);}

  /* ---------- hero ---------- */
  .hero{padding-block:clamp(64px,13vh,150px);border-bottom:1px solid var(--line);position:relative;overflow:hidden;}
  .hero .grid-lines{
    position:absolute;inset:0;pointer-events:none;
    display:grid;grid-template-columns:repeat(12,1fr);max-width:var(--maxw);
    margin:0 auto;padding:0 var(--gutter);opacity:.5;
  }
  .hero .grid-lines span{border-left:1px solid var(--line);}
  .hero .grid-lines span:first-child{border-left:none;}
  .hero-kicker{margin-bottom:42px;display:flex;flex-wrap:wrap;gap:8px 22px;}
  h1.head{
    font-family:"Archivo Expanded",sans-serif;
    font-weight:700;
    font-size:clamp(38px,6.4vw,88px);
    line-height:.99;
    letter-spacing:-.015em;
    margin:0;
    max-width:16ch;
  }
  h1.head .lift{color:var(--accent);}
  .hero-sub{
    margin-top:36px;max-width:52ch;font-size:clamp(18px,2vw,21px);color:#34343a;
    border-left:2px solid var(--accent);padding-left:18px;
  }
  .hero-meta{
    margin-top:54px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:1px;background:var(--line);border:1px solid var(--line);
  }
  .hero-meta div{background:var(--paper);padding:16px 18px;}
  .hero-meta .k{display:block;margin-bottom:6px;}
  .hero-meta .v{font-family:"Archivo Expanded",sans-serif;font-weight:600;font-size:clamp(17px,1.9vw,20px);line-height:1.18;letter-spacing:-.01em;}

  /* ---------- work / catalog ---------- */
  .lead{
    font-family:"Archivo Expanded",sans-serif;font-weight:600;
    font-size:clamp(22px,3vw,34px);line-height:1.08;letter-spacing:-.01em;
    max-width:24ch;margin:0 0 8px;
  }
  .catalog{margin-top:46px;border-top:1.5px solid var(--ink);}
  .crow{
    display:grid;grid-template-columns:58px 1.5fr 1fr 1fr;gap:18px;align-items:baseline;
    padding:22px 4px;border-bottom:1px solid var(--line);position:relative;
    transition:background .2s ease;
  }
  .crow:hover{background:#F1F1EC;}
  .crow .idx{font-family:"IBM Plex Mono",monospace;color:var(--accent);font-size:13px;}
  .crow .nm{
    font-family:"Archivo Expanded",sans-serif;font-weight:600;font-size:clamp(19px,2.4vw,26px);
    letter-spacing:-.01em;line-height:1.05;
  }
  .crow .nm small{display:block;font-family:"Hanken Grotesk",sans-serif;font-weight:400;
    text-transform:none;letter-spacing:0;font-size:15.5px;color:var(--mute);margin-top:7px;max-width:36ch;}
  .crow .nm a{color:inherit;text-decoration:none;
    background:linear-gradient(var(--accent),var(--accent)) 0 100%/0% 2px no-repeat;
    transition:background-size .25s ease,color .2s ease;}
  .crow .nm a:hover,.crow .nm a:focus-visible{color:var(--accent);background-size:100% 2px;}
  .crow .disc,.crow .sec{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.04em;
    text-transform:uppercase;color:var(--mute);padding-top:4px;}
  .crow .sec{color:var(--ink);}
  .clabels{
    display:grid;grid-template-columns:58px 1.5fr 1fr 1fr;gap:18px;
    padding:0 4px 12px;
  }
  .clabels span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--mute);}
  @media(max-width:720px){
    .crow,.clabels{grid-template-columns:40px 1fr;}
    .crow .disc,.crow .sec,.clabels span:nth-child(3),.clabels span:nth-child(4){display:none;}
    .clabels span:nth-child(1),.clabels span:nth-child(2){display:block;}
  }

  /* ---------- clients ---------- */
  .clients{margin-top:8px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
    background:var(--line);border:1px solid var(--line);}
  .clients div{background:var(--paper);padding:24px 22px;}
  .clients .org{font-family:"Archivo Expanded",sans-serif;font-weight:600;font-size:18px;letter-spacing:-.01em;line-height:1.1;}
  .clients .role{margin-top:8px;}

  /* ---------- capabilities ---------- */
  .caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
    background:var(--line);border:1px solid var(--line);margin-top:10px;}
  .cap{background:var(--paper);padding:30px 26px;}
  .cap .cn{font-family:"IBM Plex Mono",monospace;color:var(--accent);font-size:12px;margin-bottom:18px;display:block;}
  .cap h3{font-family:"Archivo Expanded",sans-serif;font-weight:600;font-size:20px;letter-spacing:-.01em;margin:0 0 10px;}
  .cap p{margin:0;color:#3a3a40;font-size:16px;line-height:1.55;}

  /* ---------- search / AI visibility ---------- */
  .sopt{margin-top:46px;border-top:1.5px solid var(--ink);}
  .srow{display:grid;grid-template-columns:96px 1fr;gap:14px 28px;align-items:baseline;
    padding:26px 4px;border-bottom:1px solid var(--line);transition:background .2s ease;}
  .srow:hover{background:#F1F1EC;}
  .srow .code{font-family:"Archivo Expanded",sans-serif;font-weight:700;
    font-size:clamp(24px,3.4vw,34px);letter-spacing:.02em;color:var(--accent);line-height:1;}
  .sbody h3{font-family:"Archivo Expanded",sans-serif;font-weight:600;font-size:19px;
    letter-spacing:-.01em;margin:0 0 8px;}
  .sbody p{margin:0;color:#3a3a40;font-size:16px;line-height:1.55;max-width:56ch;}
  .sbody .where{margin-top:12px;}
  .seo-note{margin-top:40px;max-width:60ch;color:#3a3a40;border-left:2px solid var(--accent);padding-left:18px;}
  @media(max-width:560px){.srow{grid-template-columns:1fr;gap:6px;}}
  @media(max-width:600px){
    nav.bar-nav{gap:15px;}
    nav.bar-nav a{font-size:10.5px;}
    .brand-logo{height:28px;}
    .cta{padding:8px 12px;font-size:10px;letter-spacing:.05em;}
  }

  /* ---------- approach ---------- */
  .appr{display:grid;grid-template-columns:1fr;gap:40px;}
  @media(min-width:860px){.appr{grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,90px);}}
  .appr .big{font-family:"Archivo Expanded",sans-serif;font-weight:600;font-size:clamp(22px,2.7vw,30px);
    line-height:1.18;letter-spacing:-.01em;margin:0;}
  .appr .big b{color:var(--accent);font-weight:600;}
  .appr p{margin:0 0 16px;color:#3a3a40;}
  .creds{margin-top:30px;border-top:1px solid var(--line);}
  .creds .cl{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);}
  .creds .cl span:first-child{color:var(--mute);}
  .creds .cl span:last-child{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.03em;text-align:right;}

  /* ---------- contact ---------- */
  #contact{border-bottom:none;}
  .contact-head{
    font-family:"Archivo Expanded",sans-serif;font-weight:700;
    font-size:clamp(34px,6vw,72px);line-height:1;letter-spacing:-.02em;margin:0 0 40px;max-width:14ch;
  }
  .contact-head a{border-bottom:3px solid var(--accent);}
  .contact-head a:hover{color:var(--accent);}
  .cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
    background:var(--line);border:1px solid var(--line);}
  .cgrid div{background:var(--paper);padding:20px 22px;}
  .cgrid .k{display:block;margin-bottom:8px;}
  .cgrid .v{font-size:15.5px;word-break:break-word;}
  .cgrid a:hover{color:var(--accent);}

  footer{padding:30px 0 46px;}
  .foot{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;align-items:center;}

  /* ---------- reveal motion ---------- */
  .rv{animation:rvIn .6s ease both;} @keyframes rvIn{from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none}}
  .rv.in{opacity:1;transform:none;}
  @media(prefers-reduced-motion:reduce){
    .rv{animation:none;}
    html{scroll-behavior:auto;}
  }
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--paper);
    padding:10px 16px;font-family:"IBM Plex Mono",monospace;font-size:12px;}
  .skip-link:focus{left:0;}
  /* faq */
  .faq{margin-top:46px;border-top:1.5px solid var(--ink);}
  .faq-item{padding:26px 4px;border-bottom:1px solid var(--line);}
  .faq-item h3{font-family:"Archivo Expanded",sans-serif;font-weight:600;font-size:clamp(17px,2.2vw,21px);
    letter-spacing:-.01em;margin:0 0 10px;}
  .faq-item p{margin:0;color:#3a3a40;font-size:16px;line-height:1.6;max-width:70ch;}
  /* tools */
  .tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
    background:var(--line);border:1px solid var(--line);margin-top:46px;}
  .tool{background:var(--paper);padding:30px 26px;display:flex;flex-direction:column;}
  .tool .ttag{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--accent);margin-bottom:16px;}
  .tool h3{font-family:"Archivo Expanded",sans-serif;font-weight:600;font-size:20px;
    letter-spacing:-.01em;margin:0 0 10px;}
  .tool p{margin:0 0 22px;color:#3a3a40;font-size:16px;line-height:1.55;flex:1;}
  .tool-btn{align-self:flex-start;font-family:"IBM Plex Mono",monospace;text-transform:uppercase;
    letter-spacing:.07em;font-size:11px;color:var(--ink);border:1.5px solid var(--ink);padding:9px 14px;
    transition:background .2s ease,color .2s ease,border-color .2s ease;}
  .tool-btn:hover,.tool-btn:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--paper);}

/* ---------- multi-page components ---------- */
.page-hero{padding-block:clamp(46px,8vh,92px);border-bottom:1px solid var(--line);}
.breadcrumb{font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--mute);margin-bottom:22px;}
.breadcrumb a{color:var(--mute);} .breadcrumb a:hover{color:var(--accent);} .breadcrumb b{color:var(--accent);font-weight:400;}
.page-hero h1{font-family:"Archivo Expanded",sans-serif;font-weight:700;font-size:clamp(34px,6vw,66px);line-height:1.0;letter-spacing:-.02em;margin:0;max-width:20ch;}
.page-hero h1 .lift{color:var(--accent);}
.ph-sub{margin-top:26px;max-width:58ch;font-size:clamp(17px,2vw,20px);color:#34343a;border-left:2px solid var(--accent);padding-left:18px;line-height:1.5;}

.prose{max-width:70ch;}
.prose h2{font-family:"Archivo Expanded",sans-serif;font-weight:600;font-size:clamp(22px,3vw,30px);letter-spacing:-.01em;line-height:1.12;margin:0 0 14px;}
.prose h3{font-family:"Archivo Expanded",sans-serif;font-weight:600;font-size:19px;letter-spacing:-.01em;margin:30px 0 8px;}
.prose p{margin:0 0 16px;color:#2c2c30;font-size:17px;line-height:1.62;}
.prose ul{margin:0 0 20px;padding-left:0;list-style:none;}
.prose li{position:relative;padding-left:22px;margin-bottom:11px;color:#2c2c30;line-height:1.55;}
.prose li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:2px;background:var(--accent);}
.prose strong{font-weight:600;}
.prose a{color:var(--accent);}

.svc-links{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
.svc-links a{background:var(--paper);padding:28px 24px;display:block;transition:background .2s ease;}
.svc-links a:hover{background:#F1F1EC;}
.svc-links .sn{font-family:"IBM Plex Mono",monospace;color:var(--accent);font-size:12px;margin-bottom:14px;display:block;letter-spacing:.04em;}
.svc-links h3{font-family:"Archivo Expanded",sans-serif;font-weight:600;font-size:21px;letter-spacing:-.01em;margin:0 0 9px;}
.svc-links p{margin:0;color:#3a3a40;font-size:15px;line-height:1.5;}

.morelink{display:inline-block;margin-top:26px;font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.07em;font-size:12px;color:var(--accent);}
.morelink:hover{text-decoration:underline;}

.cta-band{padding-block:clamp(56px,9vh,104px);}
.cta-band h2{font-family:"Archivo Expanded",sans-serif;font-weight:700;font-size:clamp(28px,5vw,56px);line-height:1.02;letter-spacing:-.02em;margin:0 0 30px;max-width:18ch;}
.cta-band h2 a{border-bottom:3px solid var(--accent);} .cta-band h2 a:hover{color:var(--accent);}

/* footer (override single-page footer) */
footer{padding-block:clamp(44px,6vh,72px) 28px;border-top:1px solid var(--line);}
.foot-grid{display:grid;grid-template-columns:1fr;gap:34px;}
@media(min-width:760px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;}}
.foot-logo{height:42px;width:auto;margin-bottom:16px;display:block;}
.foot-col h4{font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--mute);margin:0 0 16px;font-weight:400;}
.foot-col a{display:block;color:var(--ink);font-size:15px;margin-bottom:10px;text-decoration:none;}
.foot-col a:hover{color:var(--accent);}
.foot-col p{color:var(--mute);font-size:14px;line-height:1.5;max-width:36ch;margin:0;}
.foot-base{margin-top:42px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;}
.foot-base span,.foot-base a{font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:var(--mute);text-decoration:none;}
.foot-base a:hover{color:var(--accent);}

/* à la carte services menu */
.menu{margin-top:8px;}
.menu-group{margin-top:40px;}
.menu-group:first-child{margin-top:16px;}
.mglabel{display:block;font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.09em;font-size:11px;color:var(--accent);border-top:1.5px solid var(--ink);padding-top:16px;margin-bottom:2px;}
.menu-item{display:grid;grid-template-columns:1fr;gap:3px;padding:15px 2px;border-bottom:1px solid var(--line);}
@media(min-width:640px){.menu-item{grid-template-columns:minmax(210px,1fr) 1.6fr;gap:26px;align-items:baseline;}}
.menu-item .mi-name{font-family:"Archivo Expanded",sans-serif;font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.2;}
.menu-item .mi-desc{color:#3a3a40;font-size:15px;line-height:1.45;}

/* cycling hero phrase */
.lift{transition:opacity .45s ease;}
.lift.is-out{opacity:0;}
