:root{--ink:#17312b;--muted:#52645f;--paper:#fbfaf6;--soft:#edf2ec;--accent:#356b5c;--line:#d9e0da}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--paper);color:var(--ink);line-height:1.65}
a{color:#245b4d}header{border-bottom:1px solid var(--line);background:#fff}.wrap{max-width:1080px;margin:auto;padding:0 22px}.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0}.brand{font-weight:800;text-decoration:none;color:var(--ink);font-size:1.15rem}.brand span{display:block;font-weight:500;font-size:.72rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
nav{display:flex;gap:18px;flex-wrap:wrap}nav a{text-decoration:none;font-size:.94rem}main{padding:36px 0 64px}.crumb{font-size:.86rem;color:var(--muted);margin-bottom:28px}
h1{font-size:clamp(2.1rem,5vw,4rem);line-height:1.05;letter-spacing:-.035em;max-width:900px;margin:.2em 0}h2{margin-top:2.1em;line-height:1.2}.lead{font-size:1.22rem;max-width:760px;color:#344c45}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700;color:var(--accent)}
.grid{display:grid;gap:18px;margin:34px 0}.three{grid-template-columns:repeat(3,1fr)}.card{display:block;padding:22px;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink)}.card h2{margin:0 0 8px;font-size:1.2rem}.links{columns:2}.cta{margin-top:48px;padding:28px;background:var(--soft);border-radius:16px}.cta h2{margin-top:0}.button{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:750;padding:13px 18px;border-radius:9px}.fine{font-size:.84rem;color:var(--muted)}
.notice{border-left:4px solid var(--accent);padding:12px 16px;background:#fff;margin:32px 0;color:var(--muted)}footer{border-top:1px solid var(--line);padding:32px 0;color:var(--muted);font-size:.9rem}
@media(max-width:760px){.top{align-items:flex-start;flex-direction:column}.three{grid-template-columns:1fr}.links{columns:1}nav{gap:12px}h1{font-size:2.35rem}.mobile-call{position:fixed;bottom:14px;right:14px;z-index:5;box-shadow:0 5px 20px #0002}}


/* V2.1 mobile layout refinement */
@media (max-width: 700px) {
  header .wrap,
  .site-header .wrap,
  nav .wrap,
  main > .wrap,
  footer .wrap {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  header,
  .site-header {
    overflow: visible !important;
  }

  header .wrap,
  .site-header .wrap {
    padding-top: 20px !important;
    padding-bottom: 18px !important;
  }

  .brand,
  .logo {
    max-width: calc(100vw - 48px) !important;
  }

  nav,
  .nav {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  nav .wrap,
  .nav .wrap,
  nav ul,
  .nav-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px 22px !important;
    align-items: center !important;
  }

  nav a,
  .nav a,
  .nav-links a {
    margin: 0 !important;
    white-space: nowrap !important;
  }

  main > .wrap {
    padding-top: 30px !important;
    padding-bottom: 44px !important;
  }

  h1 {
    font-size: clamp(2.45rem, 11vw, 3.5rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.04em !important;
  }

  .lead {
    font-size: 1.2rem !important;
    line-height: 1.55 !important;
  }

  .sticky-call,
  .mobile-call,
  a[href^="tel:"].sticky,
  .call-float {
    left: 24px !important;
    right: 24px !important;
    bottom: 18px !important;
    width: auto !important;
    max-width: none !important;
  }

  .cta .button,
  .cta a.button {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  header .wrap,
  .site-header .wrap,
  nav .wrap,
  main > .wrap,
  footer .wrap,
  nav,
  .nav {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  h1 {
    font-size: clamp(2.25rem, 11vw, 3rem) !important;
  }

  nav .wrap,
  .nav .wrap,
  nav ul,
  .nav-links {
    gap: 10px 18px !important;
  }
}


/* V2.2 mobile navigation + CTA refinement */
.mobile-menu { display: none; }

@media (max-width: 700px) {
  header .top {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  header .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  header .desktop-nav { display: none !important; }

  .mobile-menu {
    display: block !important;
    flex: 0 0 auto !important;
    position: relative !important;
    margin-top: 2px !important;
  }

  .mobile-menu summary {
    width: 44px !important;
    height: 44px !important;
    padding: 8px !important;
    margin: 0 !important;
    cursor: pointer !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 8px !important;
  }

  .mobile-menu summary::-webkit-details-marker { display: none !important; }
  .mobile-menu summary::marker { display: none !important; content: "" !important; }

  .mobile-menu summary span {
    display: block !important;
    width: 27px !important;
    height: 3px !important;
    border-radius: 2px !important;
    background: currentColor !important;
  }

  .mobile-menu nav {
    position: absolute !important;
    z-index: 1000 !important;
    top: 50px !important;
    right: 0 !important;
    width: min(310px, calc(100vw - 48px)) !important;
    padding: 10px !important;
    background: #fff !important;
    border: 1px solid rgba(20,55,47,.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 34px rgba(20,55,47,.16) !important;
  }

  .mobile-menu nav a {
    display: block !important;
    padding: 13px 14px !important;
    margin: 0 !important;
    white-space: normal !important;
    border-radius: 8px !important;
  }

  main > .wrap { padding-top: 26px !important; }

  h1 {
    font-size: clamp(2.25rem, 10vw, 3.05rem) !important;
    line-height: 1.01 !important;
  }

  body { padding-bottom: 96px !important; }

  .sticky-call,
  .mobile-call,
  a[href^="tel:"].sticky,
  .call-float {
    position: fixed !important;
    z-index: 900 !important;
    left: 20px !important;
    right: 20px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}


/* V2.3 final mobile header + non-obstructive CTA */
@media (max-width: 700px) {
  body { padding-bottom: 0 !important; }

  header .wrap.top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    align-items: start !important;
    column-gap: 12px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  header .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }

  header .mobile-menu {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
    margin: 0 !important;
    position: relative !important;
  }

  .mobile-menu summary {
    margin: 0 !important;
  }

  main > .wrap {
    padding-top: 22px !important;
  }

  .sticky-call,
  .mobile-call,
  a[href^="tel:"].sticky,
  .call-float {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 22px 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}


/* V2.5 mobile hamburger dropdown: one clean vertical navigation stack */
@media (max-width: 700px) {
  .mobile-menu nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: min(320px, calc(100vw - 48px)) !important;
    padding: 8px !important;
  }

  .mobile-menu nav a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.25 !important;
  }

  .mobile-menu nav a + a {
    border-top: 1px solid rgba(20,55,47,.10) !important;
  }
}


/* V2.6 Marin County Community Resources */
.community-resources {
  margin-top: 44px;
  padding-top: 8px;
}
.community-resources .section-head {
  max-width: 780px;
  margin-bottom: 22px;
}
.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.resource-card {
  border: 1px solid rgba(20,55,47,.14);
  border-radius: 14px;
  padding: 22px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(20,55,47,.045);
}
.resource-card h3 {
  margin-top: 0;
  margin-bottom: 10px;
}
.resource-details {
  margin: 18px 0 14px;
}
.resource-details > div {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid rgba(20,55,47,.10);
}
.resource-details dt {
  font-weight: 700;
}
.resource-details dd {
  margin: 0;
}
.resource-details a,
.resource-action a {
  overflow-wrap: anywhere;
}
.resource-action {
  margin: 14px 0 0;
  font-weight: 700;
}
.resource-disclaimer {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 12px;
  background: rgba(20,55,47,.055);
  font-size: .94rem;
  line-height: 1.55;
}

@media (max-width: 700px) {
  .community-resources {
    margin-top: 32px;
  }
  .resource-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .resource-card {
    padding: 18px 16px;
    border-radius: 12px;
  }
  .resource-card h3 {
    font-size: 1.16rem;
    line-height: 1.3;
  }
  .resource-details > div {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 9px 0;
  }
  .resource-details dt {
    font-size: .86rem;
  }
  .resource-details dd,
  .resource-details dd a {
    font-size: 1rem;
  }
  .resource-action a {
    display: block;
    width: 100%;
    padding: 11px 0;
  }
  .resource-disclaimer {
    padding: 16px;
    font-size: .9rem;
  }
}


/* V2.7 mobile alignment polish for Community Resources */
@media (max-width: 700px) {
  .community-resources {
    /* Counter the guide/article full-bleed behavior and restore the site's normal mobile gutter. */
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .community-resources .section-head {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .community-resources .resource-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .community-resources .resource-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .community-resources .resource-disclaimer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* On very narrow phones, preserve a comfortable inset even if an ancestor is full-bleed. */
@media (max-width: 520px) {
  .community-resources {
    width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}


/* V2.8 final guide polish: tighten transition from Sources to Local Support */
.community-resources {
  margin-top: 24px;
  padding-top: 0;
}

@media (max-width: 700px) {
  .community-resources {
    margin-top: 18px;
  }
}

@media (max-width: 520px) {
  .community-resources {
    margin-top: 18px !important;
  }
}


/* V2.9 desktop Community Resources alignment
   Keep the section inside the same readable column as the guide
   and stack resource cards vertically on desktop. */
@media (min-width: 701px) {
  .community-resources {
    width: 100% !important;
    max-width: 780px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .community-resources .section-head {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .community-resources .resource-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 18px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .community-resources .resource-card,
  .community-resources .resource-disclaimer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}


/* V2.10 desktop alignment: match the guide's existing content column.
   Keep vertical cards; remove V2.9's independently centered 780px column. */
@media (min-width: 701px) {
  .community-resources {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .community-resources .section-head,
  .community-resources .resource-grid,
  .community-resources .resource-card,
  .community-resources .resource-disclaimer {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .community-resources .resource-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}


/* V2.11 desktop resource alignment
   Match the site's standard .wrap geometry exactly while preserving the
   existing one-column resource stack and all <=700px mobile rules. */
@media (min-width: 701px) {
  .community-resources {
    width: auto !important;
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: content-box !important;
  }

  .community-resources .section-head,
  .community-resources .resource-grid,
  .community-resources .resource-card,
  .community-resources .resource-disclaimer {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .community-resources .resource-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}


/* V2.12 structural alignment
   Community Resources now lives inside the guide's existing .wrap.
   Do not create a second desktop container around it. */
@media (min-width: 701px) {
  .community-resources {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .community-resources .resource-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}


/* V2.13 Local Support hierarchy polish
   Preserve V2.12 alignment/cards; make the section label a true heading
   and balance the vertical transition from Sources into Community Resources. */
.community-resources {
  margin-top: 38px !important;
}

.community-resources .eyebrow {
  font-size: clamp(1.55rem, 2.4vw, 2rem) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  margin: 0 0 30px !important;
}

.community-resources .section-head h2 {
  margin-top: 0 !important;
}

@media (max-width: 700px) {
  .community-resources {
    margin-top: 30px !important;
  }

  .community-resources .eyebrow {
    font-size: clamp(1.4rem, 6vw, 1.75rem) !important;
    margin-bottom: 24px !important;
  }
}

@media (max-width: 520px) {
  .community-resources {
    margin-top: 30px !important;
  }
}