:root{
  --bg:#ffffff;
  --text:#2a2d2e;
  --brand:#023f88;
  --accent:#f58220;
  --muted:#6b7280;
  --card:#f7f7f7;
  --border:rgba(0,0,0,0.12);
  --shadow:0 2px 12px rgba(0,0,0,0.06);
}

*{box-sizing:border-box;}
html{font-size:100%;}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.55;
  color:var(--text);
  background:var(--bg);
} 

img{max-width:100%;height:auto;display:block;}
a{color:var(--brand);text-decoration-thickness:0.08em;text-underline-offset:0.2em;}
a:hover, a:focus{color:var(--accent);}
a:focus{outline:2px solid var(--accent); outline-offset:2px;}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--bg);
  border:1px solid var(--border);
  padding:0.6rem 0.8rem;
} 
.skip-link:focus{left:1rem; top:1rem; z-index:1000;}

.container{
  width:min(1040px, calc(100% - 2rem));
  margin-inline:auto;
}

.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.header-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:0.75rem 0;
}

.brand{
  display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap;
}
.brand {
  flex: 0 0 auto;
}
.brand img {
  height: 88px;
  width: auto;
  max-width: none;
  display: block;
}
.brand-title{
  display:flex; flex-direction:column;
}
.brand-title a{
  color:var(--text);
  text-decoration:none;
  font-weight:800;
  font-size:1.05rem;
}
.brand-title small{color:var(--muted);}

.header-links{
  font-weight:600;
  font-size:0.95rem;
  white-space:nowrap;
}
.header-links a{color:var(--accent); text-decoration:none;}
.header-links a:hover, .header-links a:focus{color:var(--brand);}

.nav-toggle{
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:0.75rem;
  padding:0.45rem 0.7rem;
  cursor:pointer;
  font-weight:600;
}

.primary-nav{
  display:none;
  padding:0 0 0.75rem;
}
.primary-nav.is-open{display:block;}

.nav-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0.25rem;
}
.nav-list a, .nav-list summary{
  display:block;
  padding:0.65rem 0.75rem;
  border-radius:0.6rem;
  text-decoration:none;
  color:var(--bg);
  background:linear-gradient(180deg, #0265DB, var(--brand));
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  font-size:0.8rem;
}
.nav-list a:hover, .nav-list a:focus, .nav-list summary:hover, .nav-list summary:focus{
  color:var(--accent);
}

.nav-list details{
  position:relative;
}
.nav-list summary{
  list-style:none;
  cursor:pointer;
}
.nav-list summary::-webkit-details-marker{display:none;}

.subnav{
  list-style:none;
  margin:0.25rem 0 0.5rem;
  padding:0;
  border-radius:0.75rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.25);
}
.subnav a{
  background:linear-gradient(180deg, #0265DB, var(--brand));
  text-transform:none;
  letter-spacing:normal;
  font-size:0.9rem;
  font-weight:600;
  padding:0.6rem 0.75rem;
  border-radius:0;
}

.hero{
  background:linear-gradient(180deg, rgba(0,0,0,0.03), transparent);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.hero-inner{
  padding:1.25rem 0 1.5rem;
  display:grid;
  gap:1rem;
  align-items:center;
}
.hero-banner{
  border-radius: 1rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);

  /* Key fixes */
  aspect-ratio: 612 / 163;      /* gives the element height on all screens */
  width: 100%;
  background-position: center;
  background-size: contain;     /* shows the full image (no cropping) */
  background-repeat: no-repeat; /* prevents duplication/tiling */
  background-color: transparent;
}
/*.hero-banner img{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}*/
.hero-card{
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1rem;
  background:var(--bg);
  box-shadow:var(--shadow);
}
.hero-card h1{
  margin:0 0 0.35rem;
  color:var(--accent);
  font-size:clamp(1.4rem, 3vw, 2rem);
}
.hero-card p{margin:0.25rem 0;}
.hero-card .phone{font-weight:800; font-size:1.1rem; color:var(--brand);}

.main{
  padding:1.5rem 0 2.5rem;
}
.grid{
  display:grid;
  gap:1.25rem;
}
.card{
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1rem;
  background:var(--bg);
  box-shadow:var(--shadow);
}
.card h2{
  margin:0 0 0.75rem;
  color:var(--accent);
  font-size:1.25rem;
}
.prose p{margin:0 0 0.9rem;}
.prose ul{margin:0.25rem 0 1rem 1.25rem;}
.prose li{margin:0.25rem 0;}

.profile{
  display:grid;
  gap:0.75rem;
}
.profile img{
  border-radius:0.75rem;
  border:1px solid var(--border);
}

.footer{
  border-top:1px solid var(--border);
  padding:1.25rem 0;
  background:var(--bg);
}
.footer small{color:var(--muted);}
.footer-inner{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}

@media (min-width: 860px){
  .nav-toggle{display:none;}
  .primary-nav{display:block; padding:0 0 0.9rem;}
  .nav-list{flex-direction:row; flex-wrap:wrap; gap:0.35rem;}
  .nav-list a, .nav-list summary{padding:0.55rem 0.9rem;}
  .nav-list details{ }
  .nav-list details[open] .subnav{position:absolute; top:100%; left:0; min-width:260px; margin-top:0.4rem; background:transparent;}
  .subnav{box-shadow:var(--shadow);}
  .hero-inner{grid-template-columns: 1.2fr 0.8fr;}
  .hero-banner{min-height:220px;}
  .grid.two{grid-template-columns: 1.6fr 1fr; align-items:start;}
}


/* Mobile: stack header items */
@media (max-width: 760px) {
  .header-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

  /* Logo row */
  .brand {
    flex: 0 0 100%;
  }

  /* Ensure logo doesn't overflow */
  .brand img {
    height: 88px;     /* your chosen size */
    width: auto;
    max-width: 100%;
  }

  /* Put nav toggle (Menu button) on a new row */
  .nav-toggle {
    flex: 0 0 auto;
  }

  /* If you have any “header text” block, force it to full width */
  .brand-subtitle,
  .header-text {
    flex: 0 0 100%;
  }

  /* If your nav opens below, make it full width */
  .site-nav {
    flex: 0 0 100%;
  }
}

@media (min-width: 860px){
  .hero-inner{
    grid-template-columns: 612px 1fr;
    gap: 1.25rem;
  }
  .hero-banner{
    max-width: 612px;
    justify-self: start;
  }
}