:root{
    --black:#001240;
    --black-2:#0A1D52;
    --white:#FAFAF8;
    --paper:#F2F1EC;
    --gray-line: rgba(250,250,248,0.14);
    --gray-line-dark: rgba(0,18,64,0.12);
    --gray-text:#5C5C58;
    --cobalt:#5B87E5;
    --sky:#C4DDFE;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  .visually-hidden{
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  html{scroll-behavior:smooth;}
  body{
    background:var(--white);
    color:var(--black);
    font-family:'Inter', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none;}
  .mono{font-family:'IBM Plex Mono', monospace;}
  .display{font-family:'Space Grotesk', sans-serif;}
  ::selection{background:var(--cobalt); color:var(--white);}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  /* ---------- Nav ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 5vw;
    background:rgba(0,18,64,0.78);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid rgba(250,250,248,0.08);
    transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  }
  .nav.scrolled{
    background:rgba(0,18,64,0.94);
    box-shadow:0 8px 30px rgba(0,8,30,0.35);
    padding:12px 5vw;
  }
  .nav-mark{
    color:var(--white);
    display:flex; align-items:center; gap:10px;
    transition:opacity .2s ease;
  }
  .nav-mark:hover{opacity:0.88;}
  .nav-mark img{height:56px; width:auto; display:block; transition:height .3s ease;}
  .nav.scrolled .nav-mark img{height:46px;}
  .nav-links{display:flex; align-items:center; gap:30px; list-style:none;}
  .nav-links a{
    color:var(--white);
    font-family:'Inter', sans-serif;
    font-weight:500;
    font-size:14.5px;
    position:relative;
    padding-bottom:4px;
    opacity:0.78;
    transition:opacity .2s ease;
  }
  .nav-links a:hover{opacity:1;}
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--cobalt); border-radius:2px;
    transition:width .25s ease;
  }
  .nav-links a:hover::after{width:100%;}
  .nav-cta{
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:13.5px;
    color:var(--black);
    background:var(--white);
    padding:11px 22px;
    border-radius:100px;
    transition:background .22s ease, color .22s ease, transform .22s ease;
  }
  .nav-cta:hover{background:var(--cobalt); color:var(--white); transform:translateY(-1px);}
  .nav-right{display:flex; align-items:center; gap:32px;}
  .nav-toggle{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
  .nav-toggle span{width:22px; height:2px; background:var(--white); border-radius:2px;}

  /* ---------- Hero ---------- */
  .hero{
    min-height:100vh;
    background:var(--black);
    color:var(--white);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:140px 5vw 60px;
    position:relative;
    overflow:hidden;
  }
  .hero-bg{
    position:absolute; inset:0; z-index:0;
    opacity:0.5;
  }
  .hero-bg .grid-line{stroke:rgba(250,250,248,0.07); stroke-width:1;}
  .hero-bg .pulse{opacity:0;}
  .hero-watermark{
    position:absolute;
    right:-4%;
    top:50%;
    transform:translateY(-50%);
    height:78%;
    max-height:560px;
    width:auto;
    opacity:0.1;
    z-index:1;
    pointer-events:none;
    filter:saturate(0.9);
  }
  @media (max-width:1100px){
    .hero-watermark{opacity:0.07; right:-8%;}
  }
  @media (max-width:860px){
    .hero-watermark{display:none;}
  }
  .hero-inner{position:relative; z-index:2; max-width:1200px;}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--white);
    display:flex; align-items:center; gap:12px;
    margin-bottom:30px;
    opacity:0;
    animation: fadeUp .8s ease forwards .1s;
  }
  .eyebrow .sq{width:9px; height:9px; background:var(--cobalt);}
  h1.hero-title{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:clamp(42px, 7.4vw, 104px);
    line-height:0.98;
    letter-spacing:-0.02em;
    text-transform:uppercase;
    opacity:0;
    animation: fadeUp .9s ease forwards .25s;
  }
  h1.hero-title .line{display:block;}
  h1.hero-title .accent{color:var(--cobalt);}
  .hero-sub{
    margin-top:32px;
    max-width:52ch;
    font-size:18px;
    color:rgba(250,250,248,0.72);
    opacity:0;
    animation: fadeUp .9s ease forwards .4s;
  }
  .hero-cta{
    margin-top:44px;
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    opacity:0;
    animation: fadeUp .9s ease forwards .55s;
  }
  .btn{
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:14px;
    padding:15px 28px;
    border-radius:100px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition: all .22s ease;
    border:1px solid transparent;
  }
  .btn-primary{background:var(--cobalt); color:var(--white);}
  .btn-primary:hover{background:#7EA3F0; transform:translateY(-2px);}
  .btn-ghost{border-color:var(--gray-line); color:var(--white); background:rgba(250,250,248,0.03);}
  .btn-ghost:hover{border-color:var(--white); background:rgba(250,250,248,0.08); transform:translateY(-2px);}
  .btn-dark{background:var(--black); color:var(--white);}
  .btn-dark:hover{background:var(--black-2); transform:translateY(-2px);}

  @keyframes fadeUp{
    from{opacity:0; transform:translateY(18px);}
    to{opacity:1; transform:translateY(0);}
  }

  /* ---------- Ticker (signature element) ---------- */
  .ticker{
    background:var(--cobalt);
    color:var(--white);
    overflow:hidden;
    white-space:nowrap;
    border-top:1px solid rgba(10,10,10,0.15);
    border-bottom:1px solid rgba(10,10,10,0.15);
  }
  .ticker-track{
    display:inline-flex;
    align-items:center;
    animation: scroll 34s linear infinite;
    will-change:transform;
  }
  .ticker-track span{
    font-family:'IBM Plex Mono', monospace;
    font-size:13.5px;
    letter-spacing:0.04em;
    padding:14px 0;
    display:inline-flex;
    align-items:center;
  }
  .ticker-track span::after{
    content:'/';
    margin:0 28px;
    opacity:0.55;
  }
  @keyframes scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }

  /* ---------- Section shell ---------- */
  section{position:relative; padding:120px 5vw;}
  .kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--cobalt);
    margin-bottom:20px;
  }
  .kicker .num{color:var(--gray-text);}
  .section-head{max-width:680px; margin-bottom:64px;}
  .section-title{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    text-transform:uppercase;
    font-size:clamp(30px, 4vw, 50px);
    letter-spacing:-0.01em;
    line-height:1.05;
  }
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- About ---------- */
  #about{background:var(--white);}
  .about-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:80px;
    max-width:1240px;
  }
  .about-copy p{max-width:56ch; color:var(--gray-text); font-size:16.5px; margin-bottom:20px;}
  .about-copy p.lede{
    font-family:'Space Grotesk', sans-serif;
    font-weight:500;
    font-size:25px;
    color:var(--black);
    line-height:1.4;
    margin-bottom:28px;
  }
  .ratios{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--gray-line-dark);}
  .ratio-row{
    display:flex; align-items:baseline; justify-content:space-between;
    padding:26px 0;
    border-bottom:1px solid var(--gray-line-dark);
  }
  .ratio-row .val{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:38px;}
  .ratio-row .lbl{font-family:'Inter', sans-serif; font-size:13.5px; color:var(--gray-text); max-width:20ch; text-align:right;}

  /* ---------- Focus ---------- */
  #focus{background:var(--black); color:var(--white);}
  #focus .kicker{color:var(--cobalt);}
  #focus .kicker .num{color:#6B6B68;}
  #focus .section-title{color:var(--white);}
  #focus .section-head p{color:rgba(250,250,248,0.68); margin-top:16px; max-width:58ch; font-size:16px;}
  .focus-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--gray-line);
    border:1px solid var(--gray-line);
    max-width:1240px;
  }
  .focus-card{
    background:var(--black);
    padding:36px 28px;
    display:flex;
    flex-direction:column;
    gap:16px;
    transition:background .3s ease;
  }
  .focus-card:hover{background:var(--black-2);}
  .focus-card .focus-tag{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; color:var(--cobalt);}
  .focus-card h3{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:20px; text-transform:uppercase; letter-spacing:-0.01em; color:var(--white);}
  .focus-card p{font-size:14.5px; color:#9A9A96; flex:1;}
  .focus-card .focus-roles{flex:0; font-size:13px; color:var(--white); padding-top:16px; border-top:1px solid var(--gray-line);}
  .focus-card .focus-roles strong{font-weight:600;}
  @media (max-width:1100px){ .focus-grid{grid-template-columns:repeat(2, 1fr);} }
  .focus-note{margin-top:40px; max-width:820px; font-size:14.5px; color:#8C8C88; padding-top:28px; border-top:1px solid var(--gray-line);}

  /* ---------- Services ---------- */
  #services{background:var(--paper);}
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--gray-line-dark);
    border:1px solid var(--gray-line-dark);
    max-width:1240px;
  }
  .service-card{
    background:var(--paper);
    padding:38px 32px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .service-card .service-tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--cobalt);
  }
  .service-card h3{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:22px; text-transform:uppercase; letter-spacing:-0.01em;}
  .service-card p{font-size:14.5px; color:var(--gray-text); flex:1;}
  .service-card .service-fit{
    font-size:13px;
    color:var(--black);
    padding-top:16px;
    border-top:1px solid var(--gray-line-dark);
  }
  .service-card .service-fit strong{font-weight:600;}

  /* ---------- Clients ---------- */
  #clients{background:var(--black); color:var(--white);}
  #clients .kicker{color:var(--cobalt);}
  #clients .kicker .num{color:#6B6B68;}
  #clients .section-title{color:var(--white);}
  #clients .section-head p{color:rgba(250,250,248,0.68); margin-top:16px; max-width:58ch; font-size:16px;}
  #clients .process{border-left-color:var(--gray-line);}
  #clients .step::before{background:var(--white); color:var(--black);}
  #clients .step h3{color:var(--white);}
  #clients .step p{color:#9A9A96;}
  .clients-note{
    margin-top:48px;
    max-width:820px;
    font-size:14.5px;
    color:#8C8C88;
    padding-top:32px;
    border-top:1px solid var(--gray-line);
  }

  /* ---------- Candidates ---------- */
  #candidates{background:var(--paper);}
  #candidates .kicker .num{color:#9C9C96;}
  .process{
    max-width:920px;
    border-left:1px solid var(--gray-line-dark);
    margin-left:6px;
  }
  .step{
    position:relative;
    padding:0 0 56px 50px;
  }
  .step:last-child{padding-bottom:0;}
  .step::before{
    content:attr(data-n);
    position:absolute; left:-27px; top:0;
    width:52px; height:52px;
    background:var(--black);
    color:var(--white);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:14px;
  }
  .step h3{font-family:'Space Grotesk', sans-serif; font-size:22px; font-weight:600; margin-bottom:10px; text-transform:uppercase;}
  .step p{color:var(--gray-text); max-width:54ch;}
  .candidates-cta{
    margin-top:56px;
    padding-top:40px;
    border-top:1px solid var(--gray-line-dark);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:24px;
    max-width:920px;
  }
  .candidates-cta p{font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:22px; max-width:34ch; text-transform:uppercase;}

  /* ---------- FAQ ---------- */
  #faq{background:var(--white);}
  .faq-list{max-width:820px; display:flex; flex-direction:column;}
  .faq-item{
    padding:28px 0;
    border-bottom:1px solid var(--gray-line-dark);
  }
  .faq-item:first-child{border-top:1px solid var(--gray-line-dark);}
  .faq-item h3{font-family:'Space Grotesk', sans-serif; font-size:18px; font-weight:600; margin-bottom:10px;}
  .faq-item p{color:var(--gray-text); font-size:15px; max-width:64ch;}
  .faq-item p a{color:var(--cobalt); text-decoration:underline;}

  /* ---------- Contact ---------- */
  #contact{background:var(--black); color:var(--white);}
  #contact .kicker{color:var(--cobalt);}
  #contact .kicker .num{color:#6B6B68;}
  #contact .section-title{color:var(--white);}

  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    max-width:1240px;
  }
  .contact-intro p{color:rgba(250,250,248,0.68); max-width:44ch; margin-bottom:14px; font-size:16px;}
  form{display:flex; flex-direction:column; gap:22px;}
  .field{display:flex; flex-direction:column; gap:8px;}
  .field label{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:#8C8C88;}
  .field input, .field select, .field textarea{
    background:transparent;
    border:none;
    border-bottom:1px solid var(--gray-line);
    color:var(--white);
    font-family:'Inter', sans-serif;
    font-size:16px;
    padding:10px 2px;
    transition:border-color .25s ease;
  }
  .field select option{color:var(--black);}
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none;
    border-color:var(--cobalt);
  }
  .field textarea{resize:vertical; min-height:80px;}
  .submit-row{display:flex; align-items:center; gap:20px; margin-top:6px;}
  .btn-submit{
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:14px;
    background:var(--cobalt);
    color:var(--white);
    border:none;
    padding:15px 30px;
    cursor:pointer;
    border-radius:100px;
    transition: background .25s ease, transform .25s ease;
  }
  .btn-submit:hover{background:#7EA3F0; transform:translateY(-2px);}
  .form-note{font-size:13px; color:#9A9A96; opacity:0; transition:opacity .3s ease;}
  .form-note.show{opacity:1;}

  footer{
    background:var(--black);
    border-top:1px solid var(--gray-line);
    padding:56px 5vw 32px;
    display:flex;
    flex-direction:column;
    gap:28px;
  }
  .footer-brand{display:flex;}
  .footer-logo{height:52px; width:auto; display:block;}
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    padding-top:24px;
    border-top:1px solid var(--gray-line);
    color:#8C8C88;
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    letter-spacing:0.05em;
  }
  footer a:hover{color:var(--cobalt);}
  .linkedin-btn{margin-top:28px; padding:12px 22px; font-size:13.5px;}
  .footer-brand{align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  .footer-social{display:inline-flex; align-items:center; gap:8px; color:#8C8C88; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.05em; transition:color .2s ease;}
  .footer-social:hover{color:var(--cobalt);}

  :focus-visible{outline:2px solid var(--cobalt); outline-offset:3px;}

  @media (max-width: 860px){
    .nav{padding:14px 6vw;}
    .nav-mark img{height:42px;}
    .nav.scrolled .nav-mark img{height:38px;}
    .nav-links{
      position:fixed; top:70px; left:0; right:0;
      flex-direction:column; gap:0;
      background:var(--black);
      border-bottom:1px solid var(--gray-line);
      max-height:0; overflow:hidden;
      transition:max-height .3s ease;
    }
    .nav-links.open{max-height:280px;}
    .nav-links li{border-top:1px solid var(--gray-line);}
    .nav-links a{display:block; padding:18px 6vw;}
    .nav-cta{display:none;}
    .nav-toggle{display:flex;}
    .about-grid, .contact-grid{grid-template-columns:1fr; gap:48px;}
    .services-grid{grid-template-columns:1fr;}
    .focus-grid{grid-template-columns:1fr;}
    h1.hero-title{font-size:clamp(30px,8.4vw,60px);}
    section{padding:80px 6vw;}
    footer{padding:44px 6vw 28px;}
    .footer-bottom{flex-direction:column; align-items:flex-start; gap:8px;}
  }

  /* ---------- Specialism links and footer links ---------- */
  .focus-link{display:inline-block; margin-top:14px; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; color:var(--cobalt);}
  .focus-link:hover{color:var(--sky);}
  .footer-links{display:flex; flex-wrap:wrap; gap:10px 28px; list-style:none; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.05em; color:#8C8C88;}
  .footer-links a:hover{color:var(--cobalt);}

  /* ---------- Specialism pages ---------- */
  .page-hero{background:var(--black); color:var(--white); padding:170px 5vw 90px;}
  .page-hero .kicker{color:var(--cobalt);}
  .page-hero h1{font-family:'Space Grotesk', sans-serif; font-weight:700; text-transform:uppercase; font-size:clamp(34px, 5vw, 62px); letter-spacing:-0.01em; line-height:1.04; max-width:16ch; margin-bottom:28px;}
  .page-hero p{max-width:60ch; font-size:18px; color:rgba(250,250,248,0.74); margin-bottom:36px;}
  .crumbs{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; color:#8C8C88; margin-bottom:28px;}
  .crumbs a:hover{color:var(--cobalt);}
  .prose{max-width:720px;}
  .prose p{color:var(--gray-text); font-size:16.5px; margin-bottom:18px;}
  .prose p strong{color:var(--black);}
  .prose a{color:var(--cobalt); text-decoration:underline;}
  .alt{background:var(--paper);}
  .role-list{list-style:none; max-width:820px; display:grid; grid-template-columns:repeat(2, 1fr); gap:0 40px;}
  .role-list li{padding:16px 0; border-bottom:1px solid var(--gray-line-dark); font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:17px;}
  .step-list{list-style:none; max-width:820px; counter-reset:step;}
  .step-list li{counter-increment:step; padding:22px 0 22px 56px; border-bottom:1px solid var(--gray-line-dark); position:relative; color:var(--gray-text);}
  .step-list li::before{content:counter(step, decimal-leading-zero); position:absolute; left:0; top:24px; font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--cobalt); letter-spacing:0.08em;}
  .step-list li strong{display:block; color:var(--black); font-family:'Space Grotesk', sans-serif; font-size:17px; margin-bottom:4px;}
  .cta-band{background:var(--black); color:var(--white);}
  .cta-band .section-title{color:var(--white);}
  .cta-band p{max-width:56ch; color:rgba(250,250,248,0.7); margin-bottom:32px;}
  .also-links{display:flex; flex-wrap:wrap; gap:12px;}
  .also-links a{border:1px solid var(--gray-line-dark); padding:12px 22px; border-radius:100px; font-weight:500; font-size:14.5px; transition:all .2s ease;}
  .also-links a:hover{border-color:var(--cobalt); color:var(--cobalt);}
  @media (max-width:860px){ .page-hero{padding:130px 6vw 64px;} .role-list{grid-template-columns:1fr;} }