:root{
  /* Hermes-inspired (cool, balanced, all-sans) */
  --ink:#071A2C;          /* near-black navy */
  --ink-2:#0B2440;        /* hover navy */
  --slate:#586579;        /* muted text */
  --paper:#F6F7F9;        /* cool paper */
  --white:#FFFFFF;
  --border:#DDE3EC;       /* clearer hairline */
  --accent:#2E5AAC;       /* restrained cool accent */

  --radius:12px;
  --max:1040px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.7;
  letter-spacing:0.01em;
}

/* Links: quiet-lux underline */
a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:rgba(46,90,172,.35);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color .18s ease, text-decoration-color .18s ease;
}
a:hover,a:focus{
  color:var(--accent);
  text-decoration-color:rgba(46,90,172,.75);
}

.container{max-width:var(--max);margin:0 auto;padding:0 1.25rem}

header{
  position:sticky;top:0;z-index:10;
  background:rgba(246,247,249,.82);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(10px);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}

.brand{display:flex;align-items:center;gap:.75rem;font-weight:700;color:var(--ink);text-decoration:none}
.brand img{width:30px;height:30px;border-radius:8px;background:var(--white);box-shadow:0 6px 16px rgba(7,26,44,.08)}

/* Uppercase wordmark (requested) */
.brand-name{text-transform:uppercase;letter-spacing:.05em;font-size:1.02rem}

nav ul{display:flex;gap:1.1rem;list-style:none;padding:0;margin:0;align-items:center}
nav a{font-weight:600;font-size:.95rem;letter-spacing:.02em;text-decoration:none;color:var(--ink);padding:.35rem .2rem;border-radius:10px}
nav a:hover,nav a:focus{color:var(--accent)}

.cta-group{display:flex;gap:.5rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.62rem 1.05rem;border-radius:999px;
  border:1px solid var(--border);
  font-weight:650;letter-spacing:.02em;
  background:transparent;color:var(--ink);text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn.primary{background:var(--ink);color:var(--white);border-color:rgba(7,26,44,.92)}
.btn.primary:hover,.btn.primary:focus{background:var(--ink-2);transform:translateY(-1px);box-shadow:0 10px 26px rgba(7,26,44,.10)}
.btn.secondary{background:rgba(255,255,255,.70)}
.btn.secondary:hover,.btn.secondary:focus{transform:translateY(-1px);box-shadow:0 10px 26px rgba(7,26,44,.08);border-color:rgba(46,90,172,.35);color:var(--accent)}

section{padding:3.1rem 0}
.hero{padding:4.0rem 0 3.0rem}

main > section + section{border-top:1px solid rgba(221,227,236,.75)}
main > section:nth-of-type(even){background:rgba(255,255,255,.28)}

.hero h1{color:var(--ink);font-size:clamp(2.1rem,3.2vw,3.05rem);line-height:1.15;margin:0 0 .8rem}
.hero p.lead{max-width:100%;color:var(--slate);font-size:1.06rem;margin:0;text-wrap:pretty;orphans:2;widows:2;}

section h2{color:var(--ink);font-size:1.45rem;margin:0 0 1.1rem}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}

.card{
  border:1px solid rgba(221,227,236,.95);
  border-radius:var(--radius);
  padding:1.15rem 1.2rem;
  background:rgba(255,255,255,.96);
  box-shadow:0 1px 0 rgba(7,26,44,.03);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(7,26,44,.08);border-color:rgba(46,90,172,.22)}
.card h3{margin:0 0 .55rem;font-size:1.05rem;color:var(--ink)}

.muted{color:var(--slate)}

main ul{padding-left:1.15rem}
main li{margin:.35rem 0}

.tags{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem;list-style:none;padding-left:0;margin:0;}
.tag{font-size:.86rem;color:var(--slate);border:1px solid var(--border);border-radius:999px;padding:.28rem .6rem;background:rgba(255,255,255,.65) justify-self:stretch;text-align:center;}

.name-emph{font-weight:800;color:var(--ink)}

footer{border-top:1px solid var(--border);padding:2.25rem 0;background:rgba(255,255,255,.55)}
.legal{color:var(--slate);font-size:.92rem;line-height:1.65}

:focus-visible{outline:2px solid rgba(46,90,172,.55);outline-offset:3px;border-radius:10px}

@media (max-width:720px){
  .nav{gap:1rem}
  nav ul{gap:.75rem;flex-wrap:wrap;justify-content:flex-end}
  .hero{padding:3.3rem 0 2.6rem}
  section{padding:2.6rem 0}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}


#cases .card{padding-left:3.0rem;}

/* Sticky-header friendly anchor scrolling */
section[id]{scroll-margin-top:92px;}

ul.grid{list-style:none;padding-left:0;margin:0;}

#outcomes ul{list-style:none;padding-left:0;margin:0;}

/* Services: visually align spacing for selected cards */
.card.spaced p:first-of-type{margin-top:.45rem;}


/* --- Services: uniform title & description baselines (scoped) --- */
#services .grid { align-items: start; }
#services .card { display: flex; flex-direction: column; }
/* Ensure all descriptions start at the same vertical baseline,
   even when some titles wrap to multiple lines. */
#services .card h3 { min-height: 2.75rem; }
/* Make description blocks uniform height for visual symmetry
   without truncating text. Adjust as needed after visual review. */
#services .card p { margin-top: .55rem; min-height: 4.4rem; }
@media (min-width: 800px) {
  #services .card h3 { min-height: 2.95rem; }
  #services .card p { min-height: 4.6rem; }
}
/* Neutralize any card-specific spacing tweaks inside Services */
#services .card.spaced p:first-of-type { margin-top: .55rem; }