:root{
  --container: 1100px; --gutter: 1rem; 
  --brand-blue:#0047AB;
  --text:#111;
  --muted:#333;
  --bg:#f9f9f9;
  --blue-100:#E8F2FF;
  --yellow-100:#FFF7E0;
  --green-100:#E9F8EF;
  --radius:8px;
  --shadow:0 4px 10px rgba(0,0,0,0.05);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--muted);background:var(--bg);line-height:1.6}
img{max-width:100%;height:auto;}

/* Global content width: tidy 700px column site-wide */
.container{
  max-width: 900px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}



/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#fff;border:2px solid var(--brand-blue);padding:.5rem 1rem;border-radius:6px;z-index:999}

/* First-paint stability: navbar logo */
.brand-logo { width:44px; height:44px; display:block; object-fit:contain; }


/* Header / Nav */
.site-header{background:#fff;border-bottom:1px solid #e6e6e6}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.site-logo{font-weight:900;font-size:1.25rem;letter-spacing:.5px;color:var(--text)}
.site-logo a{color:inherit;text-decoration:none}

.site-nav ul{list-style:none;display:flex;gap:.75rem;flex-wrap:wrap}
.site-nav a{display:inline-block;padding:.4rem .6rem;border-radius:6px;text-decoration:none;color:var(--text);font-weight:700}
.site-nav a:hover,.site-nav a:focus{background:#eef5ff;color:var(--brand-blue)}
.site-nav a.active{color:#fff;background:var(--brand-blue)}

/* Hero */
.hero{padding:2rem 0;text-align:left;background:#fff}
.hero-content{display:flex;flex-direction:column;position:relative}
.hero h1{font-size:2rem;margin-bottom:.25em;color:var(--text)}
.hero p.lead{font-size:1.1rem;margin-bottom:1rem}
.hero .cta-row{margin-top:1rem}
/* Hero: stack CTAs under the logo, centered */
.hero .cta-row{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  margin-top: .6rem; /* already close; keep it tidy */
}

/* Optional: make each button the same width on narrow screens */
@media (max-width: 480px){
  .hero .cta-row .btn,
  .hero .cta-row .btn-intake{ width: 100%; max-width: 22rem; }
}

/* Utility: if you ever want them side-by-side on wide screens */
@media (min-width: 900px){
  .hero .cta-row.horizontal{ flex-direction: row; }
}

.hero-img{max-width:42%;float:right;margin-left:1rem;margin-bottom:1rem;border-radius:0 ;box-shadow:none}

/* --- Page hero band (soft off-white) + alignment --- */
.page-hero {
  background: #f6f7f8;           /* same tone as About */
  border-bottom: 1px solid #eee; /* subtle separation */
}
.page-hero .container {
  padding: 2.25rem 1rem;         /* breathing room around H1 + lead */
}
.page-hero h1 { margin: 0 0 .25em; line-height: 1.15; }
.page-hero .lead { color: #555; font-size: 1.125rem; }

/* --- Keep nav + all content using the same centered column --- */
/* (You already have .container elsewhere; this ensures visual parity.) */

/* --- Trinity / hero imagery sizing (reduce for now) --- */
.hero-img {
  display: block;
  max-width: 520px;   /* smaller! */
  width: 100%;
  height: auto;
  margin: 0 auto 1rem;  /* centered, with space below */
}

/* Tighten even more on small screens */
@media (max-width: 480px) {
  .page-hero .container { padding: 1.5rem 1rem; }
  .hero-img { max-width: 420px; }
}


/* Logo (bouncy) */
.logo{max-width:120px;margin:2rem auto 0;display:block;background:transparent;animation:subtleBounce 1s infinite alternate ease-in-out}
/* Ensure logo appears above the buttons when inside .hero-content */
.hero .logo{order:1}
.hero .cta-row{order:2}
@keyframes subtleBounce{from{transform:translateY(0)}to{transform:translateY(6px)}}
.logo-block{padding:1rem 0;text-align:center;background:transparent}

/* Sections */
.intro,.about-hero,.logo-section{background:#fff;padding:1.25rem 0}
.left-align .container{max-width:100px}
.left-align p{margin-bottom:1rem}

.service-links{display:flex;gap:1rem;flex-wrap:wrap;margin:1rem 0}
.domain-link a{text-decoration:none;font-weight:900}
.domain-link.financial a{color:#0a4da7}
.domain-link.health a{color:#8a6e00}
.domain-link.community a{color:#1a7842}

.service-block{padding:1rem 1.25rem;margin:1.25rem auto;text-align:left;max-width:900px;border-radius:var(--radius);box-shadow:var(--shadow)}
.section-blue{background:var(--blue-100)}
.section-yellow{background:var(--yellow-100)}
.section-green{background:var(--green-100)}
.section-pink{background:var(--pink-100)}
.service-block h2{margin-bottom:.25rem}
.service-block p{margin:.5rem 0}

.service-list{padding-left:1.25rem;margin-top:.25rem;margin-bottom:.75rem}
.service-list li{margin-bottom:.4rem;line-height:1.5}

/* Buttons & links */
a{transition:color .2s ease, background-color .2s ease}
a:hover,a:focus{text-decoration:underline}

.btn,.btn-intake{display:inline-block;padding:.75rem 1rem;border-radius:8px;background:var(--brand-blue);color:#fff;text-decoration:none;font-weight:800;box-shadow:var(--shadow)}
.btn:hover,.btn:focus,.btn-intake:hover,.btn-intake:focus{background:#003480;color:#fff;text-decoration:none}

/* Footer */
.site-footer{padding:1rem 0;background:#fff;border-top:1px solid #e6e6e6;text-align:center;font-size:.95rem}
.site-footer small{display:block;margin-top:.25rem;color:#666}

/* Type scale */
h1{font-size:2rem;margin-bottom:.5em}
h2{font-size:1.5rem;margin-bottom:.5em;color:var(--text)}
h3{font-size:1.25rem;margin:.75rem 0 .25rem;color:var(--text)}
p{margin-bottom:1rem}

/* Utilities */
.centered{text-align:center}
.left-align{text-align:left}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;clip:rect(0 0 0 0);overflow:hidden}

/* Responsive */
@media (max-width: 768px){
  .hero-img{float:none;display:block;margin:1rem auto 0;max-width:100%}
  h1{font-size:1.6rem}
  h2{font-size:1.3rem}
  h3{font-size:1.1rem}
}



/* A small, floaty brand mark option (used on Contact) */
.logo.small{
  max-width:80px;
  margin: 0.5rem 0 0 auto; /* sits at the right edge of the container */
  display:block;
}

/* ===============================
   HEADER: brand on top, nav below
   =============================== */
.site-header .bar{
  display:flex;
  flex-direction: column;          /* stack links under EverPath */
  align-items: flex-start;
  color: #2a3a4a;                    /* softer dark blue-gray vs harsh black */
  margin-left: 1rem; 
  gap: .25rem;
  padding: .75rem 0;
}
.site-logo{ font-weight: 900; font-size: 1.5rem; letter-spacing: .75px; }
.site-nav ul{
  width: 100%;
  display:flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .25rem;
  padding-top: .35rem;
  border-top: 1px solid #f0f0f0;   /* subtle divider under brand */
}

/* ======================================
   HOME: center floaty logo in the hero
   ====================================== */
.hero .logo{
  margin-left:auto;
  margin-right:auto;               /* center at all widths */
}

/* ======================================
   CONTACT: center the small floaty logo
   (only affects the logo inside .logo-section)
   ====================================== */
.logo-section .logo.small{
  margin: .5rem auto 0;            /* center just on contact */
}

/* ======================================
   TRINITY (three-circle) image: smaller
   ====================================== */
.hero-img{
  /* final override: smaller on desktop, still fluid on mobile */
  width: clamp(250px, 28vw, 320px);
  height: auto;
  display: block;
  margin: 1rem auto .75rem;
}
@media (min-width: 1024px){
  .hero-img{ max-width: 270px; }   /* hard cap on large screens */
}

/* tighten CTA spacing a touch */
.hero .cta-row{ margin-top: .6rem; }

/* ====== FINAL NORMALIZATION (Home hero) ====== */

/* Global reading column: 700px everywhere */
.container{
  max-width: 700px !important;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ====== TYPE SCALE UPGRADE ====== */

/* Body text: bump up slightly for readability */
body {
  font-size: 18px;      /* base font size */
  line-height: 1.65;    /* looser line spacing for clarity */
}

/* Adjust headings proportionally */
h1 { font-size: 2.2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }

/* Paragraphs a touch more breathing room */
p { margin-bottom: 1.1rem; }


/* Kill the old float/right image rule and keep a tidy size */
.hero-img{
  float: none !important;
  display: block;
  margin: 1rem auto .75rem !important;
  width: clamp(250px, 28vw, 320px) !important;
}
@media (min-width: 1024px){
  .hero-img{ max-width: 270px !important; }
}

/* Stack both CTAs centered, consistently */
.hero .cta-row{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: .6rem !important;
  margin-top: .6rem !important;
}

/* Make CTA widths consistent on narrow screens */
@media (max-width: 480px){
  .hero .cta-row .btn,
  .hero .cta-row .btn-intake{ width: 100%; max-width: 22rem; }
}

/* Header brand (small polish so it doesn't hug left) */
.site-header .bar{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.25rem; padding:.75rem 0;
}
.site-logo{ font-family:'Lato',sans-serif; font-weight:900; font-size:1.5rem; letter-spacing:.75px; color:#2a3a4a; margin-left:1rem; }
@media (min-width:1024px){ .site-logo{ margin-left:2rem; } }
.site-nav ul{ width:100%; display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.25rem; padding-top:.35rem; border-top:1px solid #f0f0f0; }

/* ===== Header alignment fix: brand should align with content column ===== */

/* Make the header use the same 700px column + 1rem gutters */
.site-header .container{
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Remove the extra nudge we previously gave the brand */
.site-logo{
  margin-left: 0 !important;   /* align exactly with container edge */
}

/* Keep the stacked nav layout under the brand (no change) */
.site-header .bar{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  padding: .75rem 0;
}

/* === EverPath Navigation (responsive, no-JS) === */
.site-nav { display:flex; align-items:center; justify-content:flex-end; gap:.5rem; margin: .5rem 0 1rem; }
.site-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:.9rem; }
.site-nav a { text-decoration:none; font-weight:700; }
.site-nav details > summary { list-style:none; cursor:pointer; font-weight:800; padding:.35rem .55rem; border-radius:6px; }
.site-nav details[open] > summary { background: #eef5ff; color: var(--brand-blue, #0047AB); }
.site-nav details > summary::-webkit-details-marker { display:none; }

/* === EverPath logo size normalization === */
.brand-logo {
  height: 40px;       /* larger size (adjust 38–46px to taste) */
  width: auto;
  display: block;
}

/* ensures no shrink on wide screens */
@media (min-width:1050px) {
  .brand-logo {
    height: 40px;
  }
}


/* Mobile collapse */
@media (max-width: 820px){
  .site-nav { justify-content:space-between; }
  .site-nav ul { display:block; padding:.4rem 0 0; }
  .site-nav li { margin:.25rem 0; }
  .site-nav details > summary::after { content:"☰"; font-size:1.05rem; margin-left:.35rem; }
}

/* Desktop: keep list visible, hide summary */
@media (min-width: 821px){
  .site-nav details > summary { display:none; }
  .site-nav ul { display:flex; }
}

/* Buttons */
.btn { display:inline-block; padding:.6rem 1rem; border-radius:8px; background: var(--brand-blue, #0047AB); color:#fff; text-decoration:none; font-weight:800; }
.btn:hover { filter: brightness(0.95); }

/* Minor spacing for hero/logo on mobile */
@media (max-width: 480px){
  header, .hero { padding-top: .75rem; padding-bottom: .75rem; }
}

/* Muted helper */
.muted { color:#556; opacity:.86; }
.lead { font-size:1.125rem; line-height:1.5; }


/* ===== EverPath clean white header & nav ===== */
.site-nav{ position:relative; display:flex; align-items:center; gap:1rem; padding:.6rem 1rem; background:#fff; }
.hamburger{ order:1; display:flex; align-items:baseline; gap:.5rem; cursor:pointer; user-select:none; }
.hamburger .bars{ display:inline-flex; flex-direction:column; justify-content:space-between; height:1.15em; transform:translateY(.08em); }
.hamburger .bars i{ display:block; width:28px; height:3px; border-radius:3px; background:#1f2937; }
.hamburger .bars { transform: translateY(0); }
.brand-logo { margin-left: 0rem; }

.brand{ order:2; display:flex; align-items:center; }
.brand-logo{ height:34px; display:block; }
#nav-toggle{ display:none; }
.nav-links{ order:3; list-style:none; display:flex; gap:1rem; margin:0; padding:0; white-space:nowrap; font-size:1rem; }
@media (min-width:1050px){ .hamburger{ display:none; } .nav-links{ display:flex; } }
@media (max-width:1049px){
  .nav-links{ display:none; } .hamburger{ display:flex; }
  #nav-toggle:checked ~ .nav-links{
    display:flex; position:absolute; left:0; top:calc(100% + 8px);
    flex-direction:column; gap:.6rem; background:#fff; border:1px solid #e5e7eb; border-radius:12px;
    padding:.75rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.12); z-index:50;
  }
}
.hero-logo{ width:220px; max-width:60vw; height:auto; }
.center{ display:block; margin-inline:auto; }

/* === HOTFIX: mobile-first nav, white header === */
.site-nav{ background:#fff; }

/* default: hide links, show MENU */
.site-nav .nav-links{ display:none !important; }  /* important beats old rules */
.hamburger{ display:flex !important; }

/* show dropdown only when toggled */
#nav-toggle:checked ~ .nav-links{
  display:flex !important;
  position:absolute; left:0; top:calc(100% + 8px);
  flex-direction:column; gap:.6rem;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:.75rem 1rem; box-shadow:0 10px 24px rgba(0,0,0,.12);
  z-index:50;
}

/* desktop: show links inline, hide MENU */
@media (min-width:1050px){
  .site-nav .nav-links{ display:flex !important; }
  .hamburger{ display:none !important; }
}

/* === Force EP logo size next to hamburger (all breakpoints) === */
.site-nav .brand img,
.site-nav .brand .brand-logo {
  height: 80px !important;   /* your preferred larger size */
  width: auto !important;
  max-height: none !important;
  flex: 0 0 auto !important; /* don't let flexbox shrink it */
  display: block;
  line-height: 1;
}

/* tidy alignment with the hamburger bars */
.hamburger .bars { transform: none; }      /* remove tiny baseline nudge */
.brand { margin-left: .5rem; }              /* space between bars and logo */
.site-nav { align-items: center; }          /* ensure vertical centering */

/* === One-logo system: identical size in all states === */
:root { --logo-size: 50px; }        /* tweak to taste */

.site-nav .brand img,
.site-nav .brand .brand-logo {
  height: var(--logo-size) !important;
  width: auto !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  display: block;
}

/* If any legacy styles inject a second logo, cancel them */
.nav-links img,
.nav-links::before,
.site-nav::before {
  content: none !important;
  background: none !important;
  display: none !important;
}