:root {
    --green: #4C6B5F;
    --navy: #1C3E5E;
    --olive: #78815F;
    --terracotta: #9F4B25;
    --terracotta-light: #C1683C;
    --crisis-red: #D6241C;
    --crisis-red-light: #EE4335;
    --cream: #F8E2BE;
    --tan: #B4A584;
    --dustyblue: #4D6899;
    --sage: #7F8B88;
    --offwhite: #FBF4E6;
    --white: #FFFDF8;
  }
  /* --navy: new brand accent introduced with the updated logo (matches the "LIFE" wordmark and
     flyer headings). Used deliberately for select brand touchpoints only — terracotta, cream,
     and tan remain the dominant palette so the site keeps its New Mexico desert identity rather
     than reading as a generic navy clinical site. --green is nudged slightly toward the new
     logo's teal-green while staying in the same earthy family as before. */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'Source Sans Pro', sans-serif;
    color: var(--green);
    background: var(--offwhite);
    line-height: 1.55;
  }
  h1, h2, h3 {
    font-family: 'Bitter', serif;
    color: var(--green);
    letter-spacing: 0.2px;
  }
  a { text-decoration: none; color: var(--terracotta); }
  a:hover { color: var(--terracotta-light); }
  .wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

  /* Header */
  header {
    background: var(--white);
    border-bottom: 3px solid var(--green);
    position: sticky; top: 0; z-index: 50;
  }
  /* Mobile nav toggle: hidden checkbox + label pattern, no JS needed.
     Desktop (>800px) never shows the toggle and the nav row displays normally.
     Mobile (<=800px) hides the nav row by default and reveals it only when
     the toggle is checked -- this is what keeps the sticky header short on
     phones instead of permanently covering most of the screen. */
  .nav-toggle-checkbox { position:absolute; opacity:0; pointer-events:none; }
  .nav-toggle-label { display:none; }
  .header-inner {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
    padding: 8px 24px; max-width: 1100px; margin: 0 auto;
  }
  .brand { display: flex; align-items: center; gap: 16px; justify-self:start; }
  .brand img { width: 219px; height: auto; display:block; }
  .brand-text { font-family:'Bitter', serif; font-style: italic; font-weight:600; font-size:1.15rem; letter-spacing: 0.3px; color: var(--navy); }
  .header-phone-slot { justify-self:center; }
  .crisis-btn { justify-self:end; }
  .header-phone {
    background: var(--terracotta); color: var(--white); font-weight: 700;
    padding: 12px 22px; border-radius: 999px; font-size: 1.05rem;
    display:flex; align-items:center; gap:8px;
  }
  .header-phone::before { content: "\260E"; }
  .main-nav { display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
  .main-nav a { color: var(--green); font-weight:600; font-size:0.95rem; text-decoration:none; display:inline-block; padding:10px 4px; }
  .main-nav a:hover { color: var(--terracotta); text-decoration:underline; }
  .main-nav a.active { color: var(--terracotta); border-bottom:2px solid var(--terracotta); padding-bottom:8px; }
  .header-row2 { border-top:1px solid var(--tan); padding:4px 24px; }

  /* Hero */
  .hero {
    position: relative;
    color: var(--white);
    text-align: center;
    overflow: hidden;
    min-height: 460px;
    display:flex; align-items:center; justify-content:center;
    background: var(--green);
  }
  .hero-bg {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: center 78%; z-index:0;
  }
  .hero-overlay {
    position:absolute; inset:0; z-index:1;
    background: linear-gradient(180deg, rgba(10,20,32,0.08) 0%, rgba(10,18,26,0.28) 50%, rgba(8,14,18,0.55) 100%);
  }
  .hero-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; padding: 32px 24px 45px; }
  .hero-logo { width: 260px; height: auto; margin-bottom: 22px; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.35)); }
  .page-home .hero-logo { width: 440px; margin-bottom: 10px; }
  .hero-eyebrow {
    letter-spacing: 3px; text-transform: uppercase; font-size: 1.2rem;
    font-weight: 700; color: #F2C879; margin-bottom: 16px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.3);
  }
  .hero h1 { font-size: 2.0rem; font-weight: 800; line-height: 1.2; margin-bottom: 12px; color: var(--white); text-shadow: 0 2px 10px rgba(0,0,0,0.35);}
  .hero .sub { font-size: 1.2rem; font-style: italic; font-weight: 700; color: #F2C879; margin-bottom: 24px; text-shadow: 0 1px 6px rgba(0,0,0,0.3);}
  .hero-ctas { display:flex; gap:16px; justify-content:center; flex-wrap: wrap; }
  .contact-trio { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .btn-email { display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.3; cursor: text; user-select: all; }
  .btn-email-label { font-weight:700; }
  .btn-email-address { font-size:0.85rem; font-weight:600; opacity:0.9; }

  .btn-2line { display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.3; }
  .btn-line1 { font-weight:700; }
  .btn-line2 { font-size:0.85rem; font-weight:600; opacity:0.9; }
  .btn {
    display:inline-block; padding: 15px 30px; border-radius: 999px;
    font-weight: 700; font-size: 1.05rem; transition: transform 0.15s ease;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn-primary { background: var(--terracotta); color: var(--white); }
  .btn-secondary { background: rgba(255,255,255,0.12); color: var(--white); border: 2px solid var(--white); backdrop-filter: blur(2px); }

  /* Trust strip */
  .trust { background: var(--green); color: var(--offwhite); padding: 22px 24px; }
  .trust-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 44px;
  }
  .trust-item { display:flex; align-items:center; gap:10px; font-weight:600; font-size:0.95rem; }
  .trust-item .dot { width:9px; height:9px; border-radius:50%; background: var(--terracotta-light); flex-shrink:0; }

  /* Two paths */
  .paths { padding: 40px 24px; background: var(--offwhite); }
  .section-head { text-align:center; max-width: 760px; margin: 0 auto 46px; }
  .section-head h2 { font-size: 2rem; margin-bottom: 12px; }
  .section-head p { color: #4B463E; font-size: 1.05rem; }
  .path-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1100px; margin: 0 auto; }
  .path-card { background: var(--white); border: 1px solid var(--tan); border-radius: 14px; overflow:hidden; }
  .path-card .art { height: 170px; width:100%; display:block; object-fit:cover; }
  .path-card .body { padding: 28px 30px 30px; }
  .path-card .tag {
    display:inline-block; background: var(--cream); color: var(--olive);
    font-size: 0.72rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
    padding: 5px 12px; border-radius:999px; margin-bottom: 14px;
  }
  .path-card h3 { font-size: 1.4rem; margin-bottom: 10px; }
  .path-card p { color: #4B463E; margin-bottom: 18px; }
  .path-card .link { color: var(--terracotta); font-weight:700; }

  /* About / why choose */
  .split { padding: 40px 24px; background: var(--white); }
  .split-inner {
    max-width: 1100px; margin:0 auto;
    display:grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items:flex-start;
  }
  .split h3 { font-size: 1.5rem; margin-bottom: 16px; display:flex; align-items:center; gap:10px;}
  .icon-badge {
    width:38px; height:38px; border-radius:50%; background: var(--terracotta);
    color:var(--white); display:inline-flex; align-items:center; justify-content:center;
    font-size:1.1rem; flex-shrink:0;
  }
  .icon-badge.alt { background: var(--olive); }
  .split p { color:#4B463E; margin-bottom: 14px;}
  .checklist { list-style:none; }
  .checklist li { display:flex; gap:10px; margin-bottom: 12px; font-weight:600; color: var(--green); }
  .checklist li::before { content:"✓"; color:var(--terracotta); font-weight:800; }

  /* How it works */
  .how { background: var(--cream); padding: 40px 24px; }
  .steps { display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; max-width: 1100px; margin: 0 auto; }
  .step { background: var(--white); border-radius: 14px; padding: 30px 26px; text-align:center; border: 1px solid var(--tan); }
  .step .num {
    width:44px; height:44px; border-radius:50%; background: var(--green); color: var(--offwhite);
    display:flex; align-items:center; justify-content:center; font-family:'Bitter',serif;
    font-weight:700; margin: 0 auto 16px; font-size:1.15rem;
  }
  .step h4 { font-size:1.1rem; margin-bottom:8px; }
  .step p { color:#4B463E; font-size:0.95rem; }

  /* Who we help */
  .who { padding: 40px 24px; background: var(--white); }
  .who-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 18px; max-width: 1100px; margin: 0 auto; }
  .who-item { background: var(--offwhite); border-left: 4px solid var(--terracotta); padding: 18px 22px; font-weight:600; border-radius: 4px; }
  .start-ways-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin: 20px 0 32px; }
  .start-ways-grid .who-item { border-left-color: var(--navy); }
  .start-ways-grid .who-item a { color: var(--terracotta); display:block; margin-top:4px; font-weight:700; }

  /* Welcoming section */
  .welcome { background: var(--cream); padding: 40px 24px; text-align:center; }
  .welcome-inner { max-width: 700px; margin: 0 auto; }
  .welcome h3 { font-size: 1.4rem; margin-bottom: 14px; }
  .welcome p { color: #4B463E; font-size: 1.02rem; margin-bottom: 10px; }

  /* Geographic SEO section */
  .geo { background: var(--white); padding: 40px 24px; text-align:center; border-top: 1px solid var(--tan); border-bottom: 1px solid var(--tan); }

  /* Scenic photo band — 6-across strip at every width; see mobile override below.
     Six narrower images let the band run shorter overall than the old 3-image/260px version. */
  .scenic-band { display:grid; grid-template-columns: repeat(6,1fr); }
  .scenic-block { position:relative; height: 150px; overflow:hidden; }
  .scenic-block img { width:100%; height:100%; object-fit:cover; display:block; }
  .scenic-cap {
    position:absolute; bottom:0; left:0; right:0;
    background: linear-gradient(0deg, rgba(92,107,82,0.78), transparent);
    color: var(--white); font-size:0.82rem; font-weight:600; padding: 16px 16px 10px;
    letter-spacing:0.3px;
  }

  /* County accordion entries (Counties We Serve page) */
  .hdr-county { border: 1px solid var(--tan); border-radius: 8px; margin-bottom: 10px; overflow: hidden; max-width: 800px; margin-left:auto; margin-right:auto; }
  .hdr-county summary { font-family: 'Bitter', serif; font-weight: 700; color: var(--green); font-size: 1.05rem; padding: 16px 20px; cursor: pointer; background: var(--cream); list-style: none; }
  .hdr-county summary::-webkit-details-marker { display: none; }
  .hdr-county summary::after { content: "+"; float: right; font-weight: 700; color: var(--terracotta); }
  .hdr-county[open] summary::after { content: "\2212"; }
  .hdr-county p { color: #4B463E; padding: 4px 20px 18px; margin: 0; }

  /* Insurance strip */
  .insurance { background: var(--olive); color: var(--offwhite); text-align:center; padding: 46px 24px; }
  .insurance h3 { color: var(--offwhite); font-size:1.4rem; margin-bottom:10px; }
  .insurance p { max-width:560px; margin: 0 auto; opacity:0.92; }

  /* Final CTA / footer */
  .cta-band { background: var(--green); color: var(--offwhite); padding: 38px 24px; text-align:center; }
  .cta-band h2 { color: var(--offwhite); font-size:2rem; margin-bottom:6px; }
  .cta-band .accent { color: var(--terracotta-light); }
  .cta-band p.tag { margin-bottom: 8px; opacity:0.85; }
  .cta-band .intro { max-width: 640px; margin: 0 auto 26px; font-size: 1.02rem; opacity: 0.92; }
  .btn-cta-outline { background: transparent; color: var(--offwhite); border: 2px solid var(--offwhite); }

  footer { background: #3F4A38; color: #D8CFC0; padding: 40px 24px 26px; font-size:0.9rem; }

  /* Three uniform, distinct contact callouts — phone / email / website */
  .footer-contact-row {
    display:grid; grid-template-columns: repeat(3,1fr); gap:16px;
    max-width:1100px; margin:0 auto 34px;
  }
  .footer-contact-chip {
    display:flex; flex-direction:column; align-items:center; text-align:center;
    border-radius:9px; padding:13px 16px; text-decoration:none !important;
    transition: filter 0.18s ease, transform 0.18s ease;
  }
  .footer-contact-chip:hover { filter: brightness(1.12); transform: translateY(-2px); }
  .footer-contact-chip .chip-icon { font-size:1.15rem; color: var(--white); margin-bottom:3px; }
  .footer-contact-chip .chip-label { font-size:0.66rem; letter-spacing:1.5px; text-transform:uppercase; color: rgba(255,255,255,0.75); margin-bottom:3px; }
  .footer-contact-chip .chip-value { font-size:1.18rem; font-weight:700; color: var(--white) !important; }
  .chip-call { background: var(--terracotta); }
  .chip-email { background: var(--green); }
  .chip-visit { background: var(--navy); }

  /* Social icons — smaller, quieter than the contact chips above. Not yet linked live. */
  .footer-social-row { display:flex; justify-content:center; align-items:center; gap:14px; max-width:1100px; margin: 16px auto 26px; }
  .footer-social-icon {
    display:flex; align-items:center; justify-content:center; width:36px; height:36px;
    border-radius:50%; color: var(--white); transition: filter 0.18s ease, transform 0.18s ease;
    border: none;
  }
  .footer-social-icon:hover { filter: brightness(1.12); transform: translateY(-2px); }
  .footer-social-icon svg { width:17px; height:17px; display:block; }
  .social-facebook { background: #1877F2; }
  .social-linkedin { background: #0A66C2; }
  .social-instagram {
    background: radial-gradient(circle at 30% 110%, #FDF497 0%, #FD5949 35%, #D6249F 55%, #285AEB 90%);
  }

  .footer-inner {
    max-width:1100px; margin:0 auto; display:grid;
    grid-template-columns: 1.2fr 0.9fr 0.9fr; gap:30px; align-items:start;
    padding-top:26px; border-top:1px solid rgba(255,253,248,0.15);
  }
  .footer-brand-col { display:flex; flex-direction:row; align-items:center; gap:18px; }
  .footer-brand-col .footer-logo { margin-bottom:0; flex-shrink:0; }
  .footer-brand-col .footer-brand-text p { margin:0 0 8px; }
  .footer-address { opacity:0.85; font-size:0.85rem; }
  .footer-inner strong { color: var(--offwhite); display:block; margin-bottom:8px;}
  .footer-inner .col p { margin:0 0 4px; }
  .footer-inner a { color: var(--terracotta-light); }
  .footer-inner a:hover { color: var(--offwhite); }
  .footer-logo { width:185px; height:auto; }
  .footer-legal-col .footer-legal-btn { margin-top: 2px; }
  .footer-note { text-align:center; margin-top:26px; font-size:0.78rem; opacity:0.6; line-height:1.6; }

  @media (max-width: 800px) {
    .path-grid, .split-inner, .steps, .who-grid, .start-ways-grid, .footer-contact-row, .footer-inner { grid-template-columns: 1fr; }
    .footer-inner { text-align:center; }
    .footer-brand-col { flex-direction:column; align-items:center; gap:10px; }
    .hero h1 { font-size: 1.7rem; }
    /* Header switches from a 3-column grid to a compact flex layout on phones:
       logo wraps to its own row (it's wide), then the phone + crisis buttons
       sit side by side on one shorter row instead of each stacking full-width,
       then the menu toggle. This is what actually shrinks the header, since
       stacking every element full-width was what made it so tall. */
    .header-inner {
      display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
      gap:6px; padding:8px 12px 10px;
    }
    .brand { justify-self:unset; flex-basis:100%; justify-content:center; }
    /* Phone and Crisis buttons are sized to match each other, not their own
       text, so neither reads as "bigger" -- both take an equal share of the
       row width instead of shrink-wrapping their labels. */
    .header-inner .header-phone-slot, .header-inner .crisis-btn {
      justify-self:unset; flex:1 1 0; max-width:170px;
    }
    .header-inner .header-phone, .header-inner .crisis-btn {
      padding:7px 8px; font-size:0.82rem;
      width:100%; box-sizing:border-box; justify-content:center;
    }
    /* Collapse the nav row behind a tap-to-open toggle so the sticky header
       stays short on phones instead of covering most of the viewport. */
    .nav-toggle-label {
      display:inline-flex; align-items:center; gap:6px;
      background: var(--offwhite); color: var(--green); font-weight:700;
      border: 2px solid var(--green); border-radius: 999px;
      padding: 6px 16px; cursor:pointer; font-size:0.85rem;
      flex-basis:100%; justify-content:center;
    }
    .header-row2 { display:none; }
    .nav-toggle-checkbox:checked ~ .header-row2 { display:block; }
    .main-nav { flex-direction:column; gap:2px; }
    .main-nav a { width:100%; text-align:center; padding:12px 4px; }
    .hero-logo, .page-home .hero-logo { width:230px; }
    .brand img { width:172px; }
    .brand-text { font-size:0.95rem; }
    /* On phones, a 6-across strip runs each photo too narrow to read (six slivers
       across a ~360px screen). Wrap to 3 columns / 2 rows instead — each image
       stays recognizable, and total band height is still well under the old
       3-image/260px single-row version. */
    .scenic-band { grid-template-columns: repeat(3,1fr); }
    .scenic-block { height: 95px; }
    /* Section padding: desktop's generous 56-70px top+bottom, multiplied across
       many stacked single-column sections, is what makes mobile feel longer than
       desktop for the same content. Trim it specifically at this breakpoint. */
    .paths, .split, .how, .who { padding: 28px 20px; }
    .welcome, .geo { padding: 28px 20px; }
    .cta-band { padding: 26px 20px; }
    .section-head { margin-bottom: 30px; }
  }

  .inner-hero { position:relative; color:var(--white); text-align:center; overflow:hidden; min-height:280px; display:flex; align-items:center; justify-content:center; background:var(--green); }
  .inner-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  .inner-hero-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,16,14,0.25) 0%, rgba(8,14,12,0.42) 50%, rgba(6,10,9,0.58) 100%); }
  .inner-hero-inner { position:relative; z-index:2; max-width:800px; margin:0 auto; padding:38px 24px; }
  .inner-hero h1 { color:var(--white); font-size:2rem; text-shadow:0 2px 10px rgba(0,0,0,0.35); margin-bottom:10px; }
  .inner-hero p { color:#F3EEE2; font-size:1.05rem; }
  .content-section { max-width:900px; margin:0 auto; padding:36px 24px; }
  .content-section h2 { font-size:1.5rem; margin:20px 0 12px; }
  .content-section h2:first-child { margin-top:0; }
  .content-section p { color:#4B463E; margin-bottom:14px; line-height:1.6; }
  .content-section ul { margin:0 0 14px 20px; color:#4B463E; }
  .content-section li { margin-bottom:8px; }
  .cta-section { background:var(--green); padding:38px 24px; text-align:center; }
  .cta-section h2 { color:var(--offwhite); margin-bottom:20px; }

  /* Contact form (replaces phone/text/email buttons) */
  .contact-jump { color: var(--terracotta); font-weight:700; text-decoration:none; display:inline-block; margin-top:6px; }
  .contact-jump:hover { text-decoration:underline; }
  .contact-form-wrap { max-width:290px; margin:0 auto; background: var(--offwhite); border-radius:10px; padding:16px 15px; text-align:left; }
  .contact-form-wrap h3 { color: var(--green); font-family:'Bitter',serif; font-size:0.95rem; margin:0 0 4px; text-align:center; }
  .contact-form-wrap .form-sub { color:#5b5b54; text-align:center; margin-bottom:12px; font-size:0.72rem; }
  .contact-form label { display:block; font-weight:700; color:var(--green); font-size:0.72rem; margin-bottom:3px; }
  .contact-form .form-field { margin-bottom:8px; }
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="tel"],
  .contact-form select,
  .contact-form textarea {
    width:100%; box-sizing:border-box; font-family:'Source Sans Pro',sans-serif; font-size:0.8rem;
    padding:6px 8px; border:1px solid #C9BFA9; border-radius:5px; background:var(--white); color:#2B2B26;
  }
  .contact-form textarea { min-height:55px; resize:vertical; }
  .contact-form .btn-form-submit {
    display:inline-block; width:100%; text-align:center; background: var(--terracotta); color: var(--white);
    font-weight:700; font-size:0.8rem; padding:8px 12px; border:none; border-radius:5px; cursor:pointer;
  }
  .contact-form .btn-form-submit:hover { background: var(--terracotta-light); }
  .contact-form-note { text-align:center; font-size:0.62rem; color:#8A8578; margin-top:8px; font-style:italic; }
  /* Honeypot spam trap: kept in the accessibility tree and off-canvas (not display:none
     or hidden, which some bots skip) so a scripted filler still finds and fills it, while
     real visitors never see or tab to it. process.php rejects any submission where this
     field is non-empty. */
  .form-field-honeypot {
    position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
  }
  .form-confirmation {
    display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; background:#E9F0EA;
    border:1px solid var(--green); border-radius:8px; padding:12px 14px; margin-bottom:12px;
    color:var(--green); font-weight:600; font-size:0.8rem; line-height:1.4; scroll-margin-top:170px;
  }
  .form-confirmation[hidden] { display:none; }
  .form-error {
    display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; background:#F9E8DE;
    border:1px solid var(--terracotta); border-radius:8px; padding:12px 14px; margin-bottom:12px;
    color:var(--terracotta); font-weight:600; font-size:0.8rem; line-height:1.4; scroll-margin-top:170px;
  }
  .form-error[hidden] { display:none; }
  .form-error a { color: var(--terracotta); text-decoration:underline; }
  .form-error span:not(.form-banner-icon) { flex:1 1 200px; min-width:0; }
  @media (max-width:640px) {
    .form-confirmation, .form-error { scroll-margin-top:490px; }
  }

  /* Disambiguation notice strip — homepage only, right under the header. Tells visitors and
     search engines this is a distinct, currently-operating program, separate from the closed
     residential facility that previously used a similar name. Uses the same light-blue/dustyblue
     treatment as .insurance-callout elsewhere on the site, for visual consistency. Wide container
     (1200px) so sentences wrap later on desktop; naturally taller on narrow/mobile widths. */
  .disambiguation-strip {
    background: var(--cream); border-top:1px solid var(--tan); border-bottom:1px solid var(--tan);
    padding:10px 0;
  }
  .disambiguation-strip .container { max-width:1200px; margin:0 auto; padding:0 24px; }
  .disambiguation-strip p {
    margin:0; font-size:0.85rem; color:#4B463E; line-height:1.5; text-align:center;
  }
  .disambiguation-strip strong { color:var(--terracotta); }
  @media (max-width:640px) {
    .disambiguation-strip p { font-size:0.78rem; }
  }

  /* Insurance enrollment disclaimer */
  .disclaimer-box {
    background: var(--cream); border-left:5px solid var(--terracotta); border-radius:6px;
    padding:18px 22px; margin:26px 0; font-size:0.95rem; color:#4B463E;
  }
  .disclaimer-box strong { color: var(--terracotta); }

  /* Tribal / Pueblo accordion entry — same look as county entries */

  /* Values / inclusivity callout — visually distinct from the terracotta disclaimer boxes */
  .values-callout {
    background: var(--cream); border: 2px solid var(--green); border-radius:12px;
    padding: 20px 26px; margin: 16px 0; text-align:center;
  }
  /* Distinct variant so this box doesn't blend into the page background or look
     identical to an adjacent cream callout on the same page. */
  .values-callout.callout-sage { background: #E6EFE3; border-color: var(--green); }
  .values-callout-label {
    font-family:'Bitter',serif; font-size:1.7rem; font-weight:800; font-style:italic;
    color: var(--terracotta); margin-bottom:10px;
  }
  .values-callout p {
    font-family:'Bitter',serif; font-style:italic; font-weight:600; font-size:1.05rem;
    color: var(--green); line-height:1.5; margin:0;
  }
  @media (max-width:640px) {
    .values-callout { padding:16px 16px; }
    .values-callout-label { font-size:1.4rem; }
    .values-callout p { font-size:0.95rem; }
  }

  /* Insurance page coverage callout — same structure as Our Commitment, lighter/brighter color scheme */
  .insurance-callout {
    background: #DCEEF7; border: 2px solid var(--dustyblue); border-radius:12px;
    padding: 20px 26px; margin: 16px 0; text-align:center;
  }
  .insurance-callout-label {
    font-family:'Bitter',serif; font-size:1.7rem; font-weight:800; font-style:italic;
    color: var(--terracotta); margin-bottom:10px;
  }
  .insurance-callout p {
    font-family:'Bitter',serif; font-style:italic; font-weight:600; font-size:1.05rem;
    color: var(--green); line-height:1.5; margin:0;
  }
  @media (max-width:640px) {
    .insurance-callout { padding:16px 16px; }
    .insurance-callout-label { font-size:1.4rem; }
    .insurance-callout p { font-size:0.95rem; }
  }

  /* Sitewide crisis resources button, in header */
  .crisis-btn {
    background: var(--crisis-red); color: var(--white); font-weight:700; font-size:1.05rem;
    padding:12px 22px; border-radius:999px; text-decoration:none; white-space:nowrap;
    display:inline-flex; align-items:center; gap:8px;
  }
  .crisis-btn:hover { background: var(--crisis-red-light); }

  .footer-legal-btn {
    display:inline-flex; align-items:center; gap:8px; background: var(--crisis-red); color: var(--white) !important;
    font-weight:700; font-size:1.05rem; padding:12px 22px; border-radius:999px; text-decoration:none !important;
    white-space:nowrap; transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  }
  .footer-legal-btn:hover { background: var(--crisis-red-light); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.25); }

  .btn-download {
    display:inline-flex; align-items:center; gap:8px; background: var(--terracotta); color: var(--white) !important;
    font-weight:700; font-size:1rem; padding:13px 26px; border-radius:8px; text-decoration:none !important;
  }
  .btn-download:hover { background: var(--terracotta-light); }

  /* Mobile: prevent iOS auto-zoom-on-focus (inputs under 16px trigger it), and give the
     submit button a slightly more comfortable tap target, without affecting desktop sizing */
  @media (max-width:640px) {
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form input[type="tel"],
    .contact-form select,
    .contact-form textarea { font-size:16px; }
    .contact-form .btn-form-submit { padding:11px 12px; }
  }