:root{
    --bg:#fdfbf7;
    --surface:#f6efe6;
    --ink:#2b2724;
    --muted:#6f655b;
    --accent:#b85c38;
    --rule:#e6dccf;
    --measure:34rem;
  }

  *,*::before,*::after{box-sizing:border-box}

  html{ -webkit-text-size-adjust:100% }

  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font:400 1.0625rem/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  .wrap{
    max-width:46rem;
    margin:0 auto;
    padding:clamp(3rem,9vw,6.5rem) clamp(1.25rem,5vw,2rem) 4rem;
  }

  /* ---- masthead ---- */
  .mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:3rem;height:3rem;
    border-radius:.85rem;
    background:var(--accent);
    color:var(--bg);
    font:700 1.35rem/1 Georgia,"Times New Roman",serif;
    letter-spacing:.01em;
    margin-bottom:1.75rem;
  }

  h1{
    font:600 clamp(2.1rem,6.5vw,3rem)/1.15 Georgia,"Times New Roman",serif;
    letter-spacing:-.015em;
    margin:0 0 .75rem;
  }

  .lede{
    font-size:clamp(1.125rem,2.6vw,1.3rem);
    line-height:1.6;
    color:var(--muted);
    max-width:var(--measure);
    margin:0 0 2.75rem;
  }

  p{max-width:var(--measure)}

  /* ---- services ---- */
  .rule{
    border:0;
    border-top:1px solid var(--rule);
    margin:0 0 2.5rem;
  }

  h2{
    font:600 .8125rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    text-transform:uppercase;
    letter-spacing:.11em;
    color:var(--muted);
    margin:0 0 1.5rem;
  }

  .items{
    display:grid;
    gap:1.75rem;
    grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
    margin:0 0 3rem;
    padding:0;
    list-style:none;
  }

  .items h3{
    font:600 1.0625rem/1.4 inherit;
    margin:0 0 .3rem;
  }

  .items p{
    margin:0;
    color:var(--muted);
    font-size:.9875rem;
    line-height:1.65;
  }

  /* ---- contact ---- */
  .contact{
    background:var(--surface);
    border-radius:1rem;
    padding:clamp(1.5rem,4vw,2.25rem);
    margin:0 0 2.5rem;
  }

  .contact h2{margin-bottom:.6rem}

  .contact p{margin:0 0 1rem;color:var(--muted)}

  a.email{
    display:inline-block;
    font-size:clamp(1.15rem,3.2vw,1.4rem);
    font-weight:600;
    color:var(--accent);
    text-decoration:none;
    border-bottom:2px solid transparent;
    transition:border-color .15s ease;
    word-break:break-word;
  }
  a.email:hover,a.email:focus-visible{border-bottom-color:var(--accent)}

  footer{
    color:var(--muted);
    font-size:.875rem;
    border-top:1px solid var(--rule);
    padding-top:1.5rem;
  }
  footer p{margin:0}

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

  @media (prefers-color-scheme:dark){
    :root{
      --bg:#1c1917;
      --surface:#262220;
      --ink:#f0eae2;
      --muted:#a99e92;
      --accent:#e08a5f;
      --rule:#373130;
    }
  }

  @media (prefers-reduced-motion:reduce){
    *{transition:none!important}
  }

  /* ---- navigation (added when the site grew past one page) ---- */
  nav.site{
    display:flex;
    gap:1.5rem;
    margin:0 0 2.5rem;
    font-size:.9375rem;
  }
  nav.site a{
    color:var(--muted);
    text-decoration:none;
    border-bottom:2px solid transparent;
    padding-bottom:.15rem;
    transition:color .15s ease,border-color .15s ease;
  }
  nav.site a:hover,nav.site a:focus-visible{color:var(--ink)}
  nav.site a[aria-current="page"]{
    color:var(--ink);
    border-bottom-color:var(--accent);
    font-weight:600;
  }

  /* ---- audience blocks on the capabilities page ---- */
  .audience{
    border-top:1px solid var(--rule);
    padding-top:2rem;
    margin:0 0 2.5rem;
  }
  .audience > p{color:var(--muted);margin:0 0 1.5rem}

  .offer{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem 1rem;
    align-items:baseline;
    padding:.9rem 0;
    border-bottom:1px solid var(--rule);
  }
  .offer:last-of-type{border-bottom:0}
  .offer strong{font-weight:600;flex:0 0 auto}
  .offer span{color:var(--muted);font-size:.9375rem;flex:1 1 16rem}


  /* ---- "coming soon" notice ---- */
  .notice{
    display:inline-block;
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--accent);
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:999px;
    padding:.4rem .9rem;
    margin:0 0 1.75rem;
  }