:root {
    --navy: #002157;
    --navy-100: #E7ECF5;
    --amber: #FFA401;
    --amber-600: #E08E00;
    --ink: #16213D;
    --muted: #55617B;
    --border: #DCE1EC;
    --paper: #F4F6FA;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
    background: var(--paper);
    color: var(--ink);
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  .btn-amber {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    color: var(--ink);
    background: var(--amber);
    border: none;
    border-radius: 6px;
    padding: 14px 26px;
    cursor: pointer;
    display: inline-block;
  }
  .btn-amber:hover { background: var(--amber-600); }
  .btn-outline {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    color: var(--navy);
    background: transparent;
    border: 2px solid var(--navy);
    border-radius: 6px;
    padding: 11px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
  }
  .btn-outline:hover { background: var(--navy-100); }
  .check {
    flex: none;
  }
  .eyebrow {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #B96F00;
  }
  .hero .eyebrow { color: var(--amber); }
  .section-title {
    font-family: 'Archivo Black', sans-serif;
    color: var(--ink);
    margin: 0;
    font-weight: normal;
  }

  /* utility bar */
  .utility-bar {
    background: var(--navy);
    padding: 9px 64px;
    text-align: center;
    font-size: 12.5px;
    color: #C9D3E8;
  }
  .utility-bar a { font-weight: 600; color: #FFFFFF; }
  .utility-bar a:hover { color: var(--amber); }

  /* nav */
  header.site-nav {
    background: #FFFFFF;
    border-bottom: 1px solid var(--border);
    padding: 18px 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .brand { display: flex; flex-direction: column; gap: 5px; }
  .brand img { height: 32px; width: auto; }
  .brand .tag {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #B96F00;
  }
  nav.primary {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
  }
  nav.primary > a, nav.primary > .dropdown > a.top {
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 600;
  }
  nav.primary > a:hover, nav.primary > .dropdown > a.top:hover { color: var(--navy); }
  .dropdown { position: relative; }
  .dropdown .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(0,33,87,0.12);
    padding: 8px;
    min-width: 220px;
    z-index: 10;
  }
  .dropdown:hover .menu { display: block; }
  .dropdown .menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
  }
  .dropdown .menu a:hover { background: var(--navy-100); }

  /* breadcrumb — sits between nav and hero on location pages; also doubles
     as a real up-link (state ↔ county ↔ city) for crawl depth */
  .breadcrumb {
    background: var(--paper);
    border-bottom: 1px solid var(--border);
    padding: 11px 64px;
    font-size: 12.5px;
    color: var(--muted);
  }
  .breadcrumb a { color: var(--navy); font-weight: 600; }
  .breadcrumb a:hover { color: var(--amber-600); }
  .breadcrumb .sep { margin: 0 7px; color: #B9C2D6; }

  /* place-pill — centers cleanly at any item count (unlike a fixed-column
     grid with left-aligned text, which looks off-center when sparse) and
     gives the location cross-links some color instead of flat text links */
  .place-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 980px;
    width: 100%;
  }
  .place-pill {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
  }
  .place-pill:hover { border-color: var(--amber); background: var(--navy-100); }

  /* hero — deliberately on a navy field so it reads as a distinct band
     instead of blending into the light-grey page background around it */
  .hero {
    background: var(--navy);
    background-image: radial-gradient(ellipse at top right, rgba(255,164,1,0.10), transparent 55%);
    padding: 84px 64px 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
  .hero h1 {
    margin: 0;
    max-width: 820px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 46px;
    line-height: 1.16;
    color: #FFFFFF;
    letter-spacing: -0.005em;
  }
  .hero .sub {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 18px;
    letter-spacing: 0.04em;
    color: #C9D3E8;
    text-transform: uppercase;
  }
  .hero p.desc {
    max-width: 580px;
    font-size: 17px;
    line-height: 1.6;
    color: #C9D3E8;
  }
  .hero .cta-row { display: flex; gap: 16px; align-items: center; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
  .hero .cta-row .secondary-link { color: #FFFFFF; font-size: 15px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.4); }
  .hero .cta-row .secondary-link:hover { color: var(--amber); border-color: var(--amber); }
  .trust-row {
    display: flex;
    gap: 28px;
    margin-top: 22px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .trust-item { display: flex; align-items: center; gap: 7px; }
  .trust-item span { font-size: 13.5px; color: #FFFFFF; font-weight: 600; }

  /* pricing */
  .pricing {
    background: #FFFFFF;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 64px 64px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }
  .pricing .heading { text-align: center; max-width: 560px; }
  .pricing .heading .section-title { font-size: 24px; }
  .pricing .heading p { font-size: 15px; color: var(--muted); margin-top: 6px; }
  .price-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 20px;
    width: 100%;
    max-width: 1280px;
  }
  .price-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 28px 22px;
  }
  .price-card .length { font-weight: 700; font-size: 15px; color: var(--ink); }
  .price-card .amount { font-family: 'Archivo Black', sans-serif; font-size: 32px; color: var(--navy); }
  .price-card .rule { width: 100%; height: 1px; background: var(--border); }
  .price-card .feature-list { display: flex; flex-direction: column; gap: 8px; }
  .price-card .feature { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); }
  .price-card .feature svg { flex: none; }
  .guarantee-note { font-size: 12.5px; color: var(--muted); max-width: 640px; text-align: center; line-height: 1.6; }

  /* featured price tier — gives the pricing grid a color anchor instead of
     four identical grey cards */
  .price-card.featured {
    background: #FFFFFF;
    border: 2px solid var(--amber);
    position: relative;
    box-shadow: 0 10px 24px rgba(255,164,1,0.16);
  }
  .price-card.featured::before {
    content: "Most Popular";
    position: absolute;
    top: -13px;
    left: 22px;
    background: var(--amber);
    color: var(--ink);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
  }

  /* why choose */
  .why-choose { padding: 64px 64px; display: flex; flex-direction: column; align-items: center; gap: 36px; }
  .why-choose .section-title { font-size: 26px; text-align: center; }
  .benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 20px;
    max-width: 1100px;
    width: 100%;
  }
  .benefit-card {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 22px 20px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .benefit-card .icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--navy-100);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* alternate icon tint so the section reads as more than grey cards */
  .benefit-card:nth-child(even) .icon { background: #FFF3DE; }
  .benefit-card:nth-child(even) .icon svg path { stroke: #B96F00; }
  .benefit-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }

  /* testimonials */
  .testimonials { background: #FFFFFF; border-top: 1px solid var(--border); padding: 64px 64px; display: flex; flex-direction: column; align-items: center; gap: 32px; }
  .testimonials .section-title { font-size: 26px; }
  .testi-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; max-width: 1100px; width: 100%; }
  .testi-card { background: var(--paper); border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 10px; padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; }
  .testi-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); font-style: italic; }
  .testi-card .who { font-size: 12.5px; font-weight: 700; color: var(--navy); font-style: normal; }
  .testi-link { font-size: 14.5px; font-weight: 600; color: var(--navy); }
  .testi-link:hover { color: var(--amber-600); }
  /* a verified page-specific testimonial (e.g. Riverside County) gets a
     visibly distinct treatment instead of blending into the generic six */
  .testi-card.local { background: var(--navy); border-left-color: var(--amber); }
  .testi-card.local p { color: #FFFFFF; }
  .testi-card.local .who { color: var(--amber); }

  /* FAQ -- native <details>/<summary>, no JS needed */
  .faq-section {
    background: var(--navy-100);
    padding: 60px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .faq-section .section-title { font-size: 26px; text-align: center; }
  .faq-list { max-width: 820px; width: 100%; display: flex; flex-direction: column; gap: 12px; }
  .faq-item {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
  }
  .faq-item summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--navy);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: "+";
    flex: none;
    font-family: 'Archivo Black', sans-serif;
    color: var(--amber-600);
    font-size: 18px;
  }
  .faq-item[open] summary::after { content: "\2212"; }
  .faq-item[open] summary { color: var(--amber-600); }
  .faq-item p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

  /* regional information */
  .regional-info { background: #FFFFFF; border-top: 1px solid var(--border); padding: 60px 64px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
  .regional-info .section-title { font-size: 26px; text-align: center; }
  .regional-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; max-width: 1100px; width: 100%; }
  .regional-card { background: var(--paper); border-top: 3px solid var(--amber); border-radius: 10px; padding: 22px 20px; }
  .regional-card:nth-child(2) { border-top-color: var(--navy); }
  .regional-card h3 { margin: 0 0 8px; font-family: 'Archivo Black', sans-serif; font-weight: normal; font-size: 15px; color: var(--navy); }
  .regional-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

  /* generic prose content block -- About Us, Court-Ordered, Therapist Training,
     Privacy Policy, Resources hub, and other real-copy pages */
  .content-block { background: #FFFFFF; padding: 60px 64px; display: flex; flex-direction: column; align-items: center; }
  .content-block .inner { max-width: 780px; width: 100%; }
  .content-block .section-title { text-align: left; margin-bottom: 20px; }
  .content-block h3 { font-family: 'Archivo Black', sans-serif; font-weight: normal; font-size: 17px; color: var(--navy); margin: 28px 0 10px; }
  .content-block p { font-size: 15px; line-height: 1.75; color: var(--muted); margin: 0 0 16px; }
  .content-block p:last-child { margin-bottom: 0; }
  .content-block ul, .content-block ol { margin: 0 0 16px; padding-left: 22px; color: var(--muted); font-size: 15px; line-height: 1.75; }
  .content-block li { margin-bottom: 6px; }
  .content-block a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }
  .content-block .promo-badges { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 28px; padding: 18px 22px; background: var(--navy-100); border-radius: 10px; width: 100%; }
  .content-block .promo-badges .badge { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--navy); }
  .content-block .updated-note { font-size: 12.5px; color: var(--muted); margin-top: 24px; font-style: italic; }

  /* contact form (Contact page) */
  .contact-form { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; max-width: 480px; }
  .contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: 0.02em; text-transform: uppercase; }
  .contact-form input, .contact-form textarea { font-family: 'IBM Plex Sans', sans-serif; font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: normal; color: #1a1a1a; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--paper); }
  .contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
  .contact-form button { align-self: flex-start; margin-top: 4px; }

  /* simple link-directory block (Resources hub, Site Map) */
  .link-directory h3 { font-family: 'Archivo Black', sans-serif; font-weight: normal; font-size: 15px; color: var(--navy); margin: 24px 0 10px; text-transform: uppercase; letter-spacing: 0.03em; }
  .link-directory .link-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 24px; }
  .link-directory .link-grid a { font-size: 13.5px; }

  /* amber CTA band -- a real color block, not another grey/white section */
  .cta-band {
    background: var(--amber);
    background-image: linear-gradient(135deg, var(--amber), #FFB733);
    padding: 44px 64px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .cta-band h2 { margin: 0; font-family: 'Archivo Black', sans-serif; font-weight: normal; font-size: 24px; color: var(--ink); }
  .cta-band p { margin: 0; font-size: 14.5px; color: #5C3E00; }
  .btn-navy {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    color: #FFFFFF;
    background: var(--navy);
    border: none;
    border-radius: 6px;
    padding: 13px 24px;
    display: inline-block;
    margin-top: 4px;
  }
  .btn-navy:hover { background: #001640; }

  /* state directory */
  .state-directory {
    background: var(--paper);
    border-top: 1px solid var(--border);
    padding: 60px 64px 68px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
  }
  .state-directory .section-title { font-size: 26px; text-align: center; }
  .state-directory .subtitle { font-size: 15px; color: var(--muted); text-align: center; max-width: 540px; margin-top: -14px; }
  .state-groups {
    display: grid;
    grid-template-columns: 2.4fr 1fr;
    gap: 24px;
    max-width: 1100px;
    width: 100%;
    align-items: start;
  }
  .state-group {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px 26px;
  }
  .state-group h3 {
    margin: 0 0 16px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #B96F00;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .state-group h3::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  .state-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 6px 16px;
  }
  .state-groups .state-group:last-child .state-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .state-grid a {
    font-size: 13.5px;
    color: var(--muted);
    padding: 4px 0;
    border-radius: 4px;
  }
  .state-grid a:hover { color: var(--navy); text-decoration: underline; }

  /* footer */
  footer.site-footer {
    background: var(--navy);
    padding: 32px 64px;
  }
  .footer-links {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 18px;
  }
  .footer-links a { font-size: 13px; color: #FFFFFF; font-weight: 500; }
  .footer-links a:hover { color: var(--amber); }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .footer-bottom .copyright { font-size: 12.5px; color: #9FADCB; }
  .footer-bottom .sister-sites { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
  .footer-bottom .sister-sites span { font-size: 12px; color: #C9D3E8; }
  .footer-bottom .sister-sites a { font-size: 12.5px; color: #FFFFFF; font-weight: 600; }
  .footer-bottom .sister-sites a:hover { color: var(--amber); }

  @media (max-width: 900px) {
    .utility-bar, header.site-nav, .breadcrumb, .hero, .pricing, .why-choose, .testimonials,
    .state-directory, .faq-section, .regional-info, .cta-band, footer.site-footer, .content-block {
      padding-left: 24px;
      padding-right: 24px;
    }
    .price-grid, .benefit-grid, .testi-grid, .regional-grid { grid-template-columns: 1fr; }
    .state-groups { grid-template-columns: 1fr; }
    .state-grid, .state-groups .state-group:last-child .state-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .link-directory .link-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 34px; }
    nav.primary { gap: 16px; }
  }