@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=IBM+Plex+Mono:wght@400;500&display=swap');

  :root{
    --paper:#FFFFFF;
    --paper-raised:#FFFFFF;
    --ink:#15181D;
    --navy:#1C2D4E;
    --navy-deep:#101B30;
    --accent:#0F7A4D;
    --accent-light:#34D399;
    --hairline:#E3E3E0;
    --hairline-dark:#33415E;
    --muted:#6B6E76;
    --muted-on-navy:#9FB0C9;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Source Serif 4', Georgia, serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-wrap:break-word;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{
    font-family:'Public Sans', sans-serif;
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.08;
    color:var(--navy-deep);
  }
  a{color:inherit;}
  img{max-width:100%; display:block;}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:500;
  }

  .ref-code{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.08em;
    color:var(--accent);
  }

  /* ---- Header ---- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(246,244,239,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--hairline);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 32px;
    max-width:1180px; margin:0 auto;
  }
  .logo{
    font-family:'Public Sans', sans-serif;
    font-weight:800; font-size:18px; letter-spacing:0.02em;
    color:var(--navy-deep);
  }
  .logo span{color:var(--accent);}
  .nav-links{display:flex; gap:36px; list-style:none;}
  .nav-links a{
    font-family:'Public Sans', sans-serif;
    font-size:14px; font-weight:500;
    text-decoration:none; color:var(--ink);
    border-bottom:1px solid transparent;
    padding-bottom:2px;
    transition:border-color .15s;
  }
  .nav-links a:hover{border-color:var(--accent);}
  .nav-cta{
    font-family:'Public Sans', sans-serif;
    font-size:13px; font-weight:600;
    background:var(--navy-deep); color:var(--paper);
    padding:10px 18px;
    text-decoration:none;
    letter-spacing:0.02em;
  }
  @media(max-width:820px){ .nav-links{display:none;} }

  /* ---- Hero ---- */
  .hero{padding:96px 0 72px; border-bottom:1px solid var(--hairline);}
  .hero .eyebrow{margin-bottom:22px;}
  .hero h1{
    font-size:clamp(38px,5.2vw,64px);
    max-width:820px;
    margin-bottom:26px;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--accent);
  }
  .hero p.lede{
    font-size:19px;
    color:#3B3F46;
    max-width:560px;
    margin-bottom:40px;
  }
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:72px;}
  .btn-primary{
    font-family:'Public Sans', sans-serif;
    font-weight:600; font-size:14.5px;
    background:var(--navy-deep); color:var(--paper);
    padding:15px 26px;
    text-decoration:none;
    border:1px solid var(--navy-deep);
    letter-spacing:0.01em;
  }
  .btn-primary:hover{background:var(--navy);}
  .btn-secondary{
    font-family:'Public Sans', sans-serif;
    font-weight:600; font-size:14.5px;
    background:transparent; color:var(--navy-deep);
    padding:15px 26px;
    text-decoration:none;
    border:1px solid var(--hairline-dark);
  }
  .btn-secondary:hover{border-color:var(--navy-deep);}

  .stat-strip{
    display:grid; grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--hairline);
  }
  .stat-strip div{
    padding:26px 28px 0;
    border-right:1px solid var(--hairline);
  }
  .stat-strip div:last-child{border-right:none;}
  .stat-num{
    font-family:'Public Sans', sans-serif;
    font-weight:800; font-size:30px; color:var(--navy-deep);
    display:block; margin-bottom:4px;
  }
  .stat-label{font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--muted);}
  @media(max-width:700px){ .stat-strip{grid-template-columns:1fr;} .stat-strip div{border-right:none; border-bottom:1px solid var(--hairline); padding-bottom:20px; margin-bottom:6px;} }

  .experience-from{
    padding:20px 0 0;
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    color:var(--muted);
    letter-spacing:0.02em;
  }
  .experience-from b{color:var(--ink); font-weight:500;}

  /* ---- Section shell ---- */
  section{padding:88px 0;}
  section.on-navy{background:var(--navy-deep); color:var(--paper);}
  section.on-navy h2{color:var(--paper);}
  .section-head{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:24px; margin-bottom:56px;
    border-bottom:1px solid var(--hairline);
    padding-bottom:28px;
  }
  section.on-navy .section-head{border-color:var(--hairline-dark);}
  .section-head h2{font-size:clamp(26px,3vw,36px);}
  .section-head p{max-width:420px; color:var(--muted); font-size:15px;}
  section.on-navy .section-head p{color:var(--muted-on-navy);}

  /* ---- Services ---- */
  .service{
    display:grid; grid-template-columns:120px 1fr;
    gap:32px;
    padding:40px 0;
    border-bottom:1px solid var(--hairline);
  }
  .service:first-of-type{padding-top:0;}
  .service-code{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px; color:var(--accent); letter-spacing:0.04em;
    padding-top:4px;
  }
  .service h3{font-size:23px; margin-bottom:12px; color:var(--navy-deep);}
  .service p.desc{color:#3B3F46; max-width:640px; margin-bottom:10px;}
  .service .best-for{
    font-family:'Public Sans', sans-serif;
    font-size:13px; font-weight:600; color:var(--accent);
    margin-bottom:22px;
  }
  blockquote{
    border-left:2px solid var(--accent);
    padding:2px 0 2px 20px;
    max-width:600px;
    font-style:italic;
    color:#2C3038;
    font-size:15.5px;
  }
  blockquote cite{
    display:block; margin-top:10px;
    font-family:'Public Sans', sans-serif;
    font-style:normal; font-size:12.5px;
    font-weight:600; letter-spacing:0.02em;
    color:var(--navy);
  }
  @media(max-width:700px){ .service{grid-template-columns:1fr; gap:10px;} }

  /* ---- How we work ---- */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline);}
  section.on-navy .steps{background:var(--hairline-dark);}
  .step{background:var(--navy-deep); padding:36px 32px;}
  .step .ref-code{color:var(--accent-light);}
  .step h3{color:var(--paper); font-size:19px; margin:14px 0 12px;}
  .step p{color:var(--muted-on-navy); font-size:14.5px;}
  @media(max-width:820px){ .steps{grid-template-columns:1fr;} }

  /* ---- About ---- */
  .about-grid{display:grid; grid-template-columns:0.9fr 1.4fr; gap:64px;}
  .about-photo{
    aspect-ratio:4/5; background:var(--hairline);
    border:1px solid var(--hairline-dark);
    overflow:hidden;
  }
  .about-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .about-name{font-size:24px; margin:20px 0 4px;}
  .about-role{font-family:'Public Sans',sans-serif; font-size:13px; color:var(--muted); margin-bottom:14px;}
  .about-copy p{margin-bottom:18px; color:#2C3038; overflow-wrap:break-word;}
  .about-copy strong{color:var(--navy-deep);}
  .principles{list-style:none; margin-top:32px; border-top:1px solid var(--hairline); padding-top:24px;}
  .principles li{
    display:grid; grid-template-columns:26px 1fr;
    gap:12px; padding:12px 0; font-size:15px; color:#3B3F46;
  }
  .principles li b{color:var(--navy-deep);}
  .principles .dash{color:var(--accent); font-family:'IBM Plex Mono',monospace;}
  .principles .ptext{overflow-wrap:break-word;}
  @media(max-width:820px){ .about-grid{grid-template-columns:1fr;} }

  /* ---- Contact ---- */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
  .contact-field{margin-bottom:18px;}
  .contact-field label{
    display:block; font-family:'Public Sans',sans-serif; font-size:12.5px;
    letter-spacing:0.04em; text-transform:uppercase; color:var(--muted-on-navy);
    margin-bottom:8px;
  }
  .contact-field input, .contact-field textarea{
    width:100%; background:transparent; border:none; border-bottom:1px solid var(--hairline-dark);
    color:var(--paper); font-family:'Source Serif 4',serif; font-size:16px; padding:8px 2px;
  }
  .contact-field input:focus, .contact-field textarea:focus{outline:none; border-bottom-color:var(--accent);}
  .contact-info div{margin-bottom:26px;}
  .contact-info .label{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent-light); margin-bottom:6px;}
  .contact-info a{color:var(--paper); text-decoration:none; border-bottom:1px solid var(--hairline-dark);}
  @media(max-width:820px){ .contact-grid{grid-template-columns:1fr;} }

  footer{border-top:1px solid var(--hairline); padding:28px 0; font-family:'Public Sans',sans-serif; font-size:13px; color:var(--muted);}
  .footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}

  .badge{
    display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em;
    color:var(--accent); background:var(--navy-deep); padding:4px 8px; margin-bottom:20px;
  }