:root{
    --ink:#1A1D29;
    --ink-soft:#4A4F63;
    --paper:#F5F6F8;
    --paper-raised:#FFFFFF;
    --line:#DADCE3;
    --royal:#2B4FCE;
    --purple:#5B2C9E;
    --emerald:#0FA36B;
    --font-display: Georgia, 'Times New Roman', serif;
    --font-body: Helvetica, Arial, sans-serif;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }

  a{ color:inherit; }

  /* ---------- Header / Nav ---------- */
  .site-header{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(245,246,248,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    max-width:1120px;
    margin:0 auto;
    padding:20px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
  }
  .wordmark{
    font-family:var(--font-display);
    font-size:22px;
    letter-spacing:0.04em;
    color:var(--ink);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .wordmark .mark{
    width:26px; height:26px;
    display:inline-block;
  }
  .wordmark .mark img{ width:100%; height:auto; display:block; }
  .wordmark .firm{ font-weight:normal; text-transform:uppercase; letter-spacing:0.08em; }
  .wordmark .llc{
    font-family:var(--font-display);
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    align-self:flex-end;
    margin-bottom:3px;
  }

  nav.tabs{
    display:flex;
    gap:28px;
  }
  nav.tabs button{
    font-family:var(--font-body);
    font-size:15px;
    background:none;
    border:none;
    padding:6px 0;
    color:var(--ink-soft);
    cursor:pointer;
    border-bottom:2px solid transparent;
    transition:color .15s ease, border-color .15s ease;
  }
  nav.tabs button:hover{ color:var(--ink); }
  nav.tabs button.active{
    color:var(--ink);
    border-bottom-color:var(--royal);
    font-weight:bold;
  }
  nav.tabs button:focus-visible,
  .btn:focus-visible{
    outline:2px solid var(--royal);
    outline-offset:3px;
  }

  .nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:32px;
    height:32px;
    padding:0;
    border:none;
    background:none;
    cursor:pointer;
  }
  .nav-toggle span{
    display:block;
    width:100%;
    height:2px;
    background:var(--ink);
    transition:transform .2s ease, opacity .2s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav-toggle:focus-visible{
    outline:2px solid var(--royal);
    outline-offset:3px;
  }

  /* ---------- Hero ---------- */
  .hero{
    max-width:1120px;
    margin:0 auto;
    padding:72px 32px 56px;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:48px;
    align-items:center;
  }
  .hero h1{
    font-family:var(--font-display);
    font-size:44px;
    line-height:1.15;
    margin:0 0 20px;
    max-width:14ch;
  }
  .hero p.lede{
    font-size:18px;
    color:var(--ink-soft);
    max-width:46ch;
    margin:0 0 28px;
  }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    display:inline-block;
    font-family:var(--font-body);
    font-size:15px;
    padding:12px 22px;
    border-radius:2px;
    text-decoration:none;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .12s ease, background .15s ease;
  }
  .btn-primary{ background:var(--royal); color:#fff; }
  .btn-primary:hover{ background:#213dab; }
  .btn-secondary{ background:transparent; color:var(--ink); border-color:var(--ink); }
  .btn-secondary:hover{ background:var(--ink); color:#fff; }

  .hero-graphic{ width:100%; max-width:460px; height:auto; margin:0 auto; display:block; }

  /* ---------- Panels ---------- */
  main{
    max-width:1120px;
    margin:0 auto;
    padding:0 32px 96px;
  }
  .panel{ display:none; }
  .panel.active{ display:block; animation:fade .3s ease; }
  @keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

  .panel-intro{
    max-width:62ch;
    padding-top:8px;
    margin-bottom:48px;
    border-top:1px solid var(--line);
    padding-top:32px;
  }
  .panel-intro h2{
    font-family:var(--font-display);
    font-size:32px;
    margin:0 0 14px;
  }
  .panel-intro p{
    font-size:17px;
    color:var(--ink-soft);
    margin:0;
  }

  /* How We Help — service pillars */
  .pillars{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .pillar{
    background:var(--paper-raised);
    padding:30px 32px;
  }
  .pillar h3{
    font-family:var(--font-display);
    font-size:19px;
    margin:0 0 10px;
  }
  .pillar p{
    margin:0;
    color:var(--ink-soft);
    font-size:15px;
  }
  .pillar-royal{ border-top:3px solid var(--royal); }
  .pillar-purple{ border-top:3px solid var(--purple); }
  .pillar-emerald{ border-top:3px solid var(--emerald); }

  .closing-line{
    margin-top:36px;
    font-size:16px;
    color:var(--ink-soft);
    max-width:58ch;
  }

  /* Who We Are */
  .bio-grid{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:48px;
  }
  .bio-photo-slot{
    aspect-ratio:3/4;
    border-radius:2px;
    overflow:hidden;
  }
  .bio-photo-slot img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .bio-name{
    font-family:var(--font-display);
    font-size:26px;
    margin:0 0 4px;
  }
  .bio-title{
    color:var(--ink-soft);
    font-size:15px;
    margin:0 0 24px;
  }
  .pull-quote{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:bold;
    font-size:22px;
    line-height:1.4;
    color:var(--royal);
    border-left:3px solid var(--emerald);
    padding-left:22px;
    margin:28px 0;
    max-width:44ch;
  }
  .bio-copy p{ margin:0 0 18px; max-width:64ch; }
  .credentials{
    margin-top:32px;
    padding-top:24px;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
  }
  .credentials h4{
    font-size:13px;
    text-transform:none;
    color:var(--ink-soft);
    margin:0 0 6px;
    font-weight:bold;
  }
  .credentials p{ margin:0; font-size:15px; }

  /* Who We Serve — case studies */
  .case-list{
    display:flex;
    flex-direction:column;
  }
  .case{
    border-top:1px solid var(--line);
    padding:32px 0;
    display:grid;
    grid-template-columns:260px 1fr;
    gap:40px;
  }
  .case:last-of-type{ border-bottom:1px solid var(--line); }
  .case-sector{
    font-family:var(--font-display);
    font-weight:bold;
    font-size:20px;
    line-height:1.3;
    color:var(--royal);
    padding-right:12px;
  }
  .case-body dl{ margin:0; }
  .case-body dt{
    font-weight:bold;
    font-size:13px;
    color:var(--ink-soft);
    margin:0 0 4px;
  }
  .case-body dd{
    margin:0 0 18px;
    font-size:15px;
  }
  .case-body dd:last-child{ margin-bottom:0; }
  .case-note{
    margin-top:28px;
    font-size:14px;
    color:var(--ink-soft);
    font-style:italic;
  }

  /* How to Reach Us */
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
  }
  .contact-details dt{
    font-size:13px;
    color:var(--ink-soft);
    margin:18px 0 3px;
  }
  .contact-details dt:first-child{ margin-top:0; }
  .contact-details dd{
    margin:0;
    font-size:17px;
  }
  .contact-details dd a{ text-decoration:none; border-bottom:1px solid var(--line); }
  .contact-details dd a:hover{ border-color:var(--royal); }

  form.contact-form{ display:flex; flex-direction:column; gap:16px; }
  form.contact-form label{ font-size:13px; color:var(--ink-soft); display:block; margin-bottom:6px; }
  form.contact-form input,
  form.contact-form textarea{
    width:100%;
    font-family:var(--font-body);
    font-size:15px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:2px;
    background:var(--paper-raised);
    color:var(--ink);
  }
  form.contact-form textarea{ min-height:110px; resize:vertical; }
  form.contact-form .btn{ align-self:flex-start; }
  .form-note{ font-size:12px; color:var(--ink-soft); margin-top:4px; }

  footer{
    border-top:1px solid var(--line);
    padding:28px 32px;
    max-width:1120px;
    margin:0 auto;
    font-size:13px;
    color:var(--ink-soft);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
  }

  @media (max-width:820px){
    .header-inner{ flex-wrap:wrap; gap:12px; }
    .nav-toggle{ display:flex; }
    nav.tabs{
      display:none;
      flex-basis:100%;
      flex-direction:column;
      gap:2px;
      margin-top:4px;
      padding-top:12px;
      border-top:1px solid var(--line);
    }
    nav.tabs.open{ display:flex; }
    nav.tabs button{
      width:100%;
      text-align:left;
      padding:12px 4px;
      border-bottom:1px solid var(--line);
    }
    nav.tabs button.active{ border-bottom-color:var(--royal); }
    .hero{ grid-template-columns:1fr; padding-top:48px; }
    .hero h1{ font-size:34px; max-width:none; }
    .pillars{ grid-template-columns:1fr; }
    .bio-grid{ grid-template-columns:1fr; }
    .bio-photo-slot{ max-width:200px; }
    .credentials{ grid-template-columns:1fr; }
    .case{ grid-template-columns:1fr; gap:12px; }
    .contact-grid{ grid-template-columns:1fr; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .panel.active{ animation:none; }
  }