/* Self-hosted so the site keeps its promise of loading nothing from
   third-party servers, and so the CSP can stay at font-src 'self'.
   Downloaded from Google Fonts 09/03/2026. Both families are licensed
   under the SIL Open Font License; see assets/fonts/LICENSES.md. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-300-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-300-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/atkinson-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/atkinson-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/atkinson-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/atkinson-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Understory. See BRAND.md for the full system and the two directions
     that were not adopted. Every ratio below is measured against the
     surface the color actually sits on.

     The accent is aspen gold, not the madrone red first proposed. Color
     analysis of the practice's own fall photographs came back 39.6% gold
     and 38.6% sky blue, with no red at all, so the palette follows the
     photographs rather than fighting them. See BRAND.md. */

  --ground: #EBEDE6;        /* lichen, page ground */
  --surface: #F7F8F4;       /* cards and raised surfaces */
  --band: #E1E5DA;          /* alternating section bands */
  --ink: #17231C;           /* fir shadow, body text      13.8:1 on ground */
  --muted: #4A574E;         /* wet stone, secondary        6.4:1 on ground */
  --fir: #1F3A2E;           /* headings, primary button   10.5:1 on ground */
  --field: #14342A;         /* the fir field, crisis block */
  --aspen: #7A5510;         /* the single accent           5.7:1 on ground */
  --aspen-deep: #5F410C;    /* hover                       7.9:1 on ground */
  --gold-on-field: #D9A63F; /* aspen gold, field only      6.1:1 on field */
  --field-ink: #F2F4EF;     /* text on the fir field      12.2:1 */
  --field-muted: #C3D0C4;   /* secondary on the field      8.5:1 */
  --rule: #D3D8CC;          /* hairlines */
  --note: #F0EAD8;          /* build-time placeholder note, removed at launch */
  --focus: #7A5510;

  --measure: 34rem;
  --wrap: 58rem;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(23, 35, 28, 0.05), 0 8px 24px rgba(23, 35, 28, 0.06);

  /* Self-hosted, see the @font-face block above. Fraunces carries the
     headings; Atkinson Hyperlegible, drawn by the Braille Institute to be
     readable at low vision, carries everything meant to be read. */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  color: var(--fir);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin: 0 0 0.6em; }
h2[id], h3[id] { scroll-margin-top: 6rem; }
h2 { font-size: clamp(1.4rem, 2.8vw, 1.8rem); margin: 1.45em 0 0.5em; }
h3 { font-size: 1.15rem; margin: 1.15em 0 0.35em; color: var(--field); }

p, li { max-width: var(--measure); }
p { margin: 0 0 0.85em; }

a { color: var(--aspen); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--aspen-deep); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.35rem;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--fir);
  color: var(--field-ink);
  padding: 0.7rem 1.1rem;
  z-index: 50;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Masthead ---------- */

.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 40;
}
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.75rem;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--fir);
  padding-block: 0.45rem;
  line-height: 1;
}
/* The emblem is watercolor artwork on a near-white ground (#F9F6F0), which
   sits invisibly on the masthead surface (#F7F8F4). It holds down to about
   40px tall and turns to mush below that, which is why the favicon keeps the
   geometric mark instead. */
.wordmark-emblem {
  height: 46px;
  width: auto;
  flex: none;
  mix-blend-mode: multiply;
}
.wordmark-text { display: inline-flex; flex-direction: column; align-items: center; }
.wordmark-name {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wordmark-sub {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.34rem;
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}
.wordmark-sub::before, .wordmark-sub::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
.wordmark-sub span { padding-left: 0.32em; }

/* On a phone the lockup has to share the bar with the Menu button, or the
   sticky masthead grows a second row and eats the screen. */
@media (max-width: 30rem) {
  .wordmark { gap: 0.45rem; }
  .wordmark-emblem { height: 32px; }
  .wordmark-name { font-size: 0.95rem; letter-spacing: 0.04em; }
  .wordmark-sub { font-size: 0.5rem; letter-spacing: 0.22em; margin-top: 0.25rem; }
  .wordmark-sub::before, .wordmark-sub::after { display: none; }
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: var(--band);
  border: 1px solid var(--rule);
  color: var(--fir);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1rem;
  height: 2px;
  background: currentColor;
  content: "";
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; top: -5px; }
.nav-toggle-bars::after { position: absolute; top: 5px; }

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  /* 0.85rem, not the 1.25rem this used to be. Seven items need 925px of a
     885px row at the wider spacing, so the ribbon broke into two rows the
     moment Provider Login was added. Tightening the gap is the smallest
     thing that buys back the 40px, and it leaves the type untouched. */
  gap: 0.25rem 0.85rem;
  margin: 0;
  padding: 0;
}
.site-nav li { max-width: none; }
.site-nav a {
  display: block;
  padding: 0.45rem 0;
  color: var(--fir);
  text-decoration: none;
  font-size: 0.97rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--aspen); color: var(--aspen-deep); }
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--fir);
  font-weight: 600;
}

/* 45.99rem, not 46rem: a max-width and a min-width query at the same
   breakpoint BOTH match at exactly that width, which would put the
   hamburger and the two-column card grid on screen together. */
@media (max-width: 45.99rem) {
  .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; width: 100%; }
  .js .site-nav.open { display: block; }
  .site-nav ul {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--rule);
    padding-bottom: 0.75rem;
  }
  .site-nav a { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--fir); }
}

/* ---------- Sections ---------- */

.hero {
  background: linear-gradient(180deg, var(--band) 0%, var(--ground) 100%);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.1rem, 5vw, 3.4rem);
}
.hero p.lede { font-size: 1.2rem; color: var(--muted); max-width: 34rem; }
.hero h1 { max-width: 36rem; text-wrap: balance; }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--aspen);
  font-weight: 600;
  margin: 0 0 0.9rem;
}

.section { padding-block: clamp(1.7rem, 4vw, 2.6rem); }
.section + .section { border-top: 1px solid var(--rule); }
.section.on-sand { background: var(--band); border-top: 1px solid var(--rule); }
.section > .wrap > h2:first-child { margin-top: 0; }

.lede { font-size: 1.12rem; }

/* ---------- Buttons ---------- */

/* margin-bottom because .actions is no longer always the last thing in a
   section: the Mentaya benefits check sits mid-flow on the fees page. */
.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.2rem 0 1.6rem; }

/* On a phone the pair wraps, and two buttons of different natural widths
   stacked left-aligned read as ragged. Below the phone breakpoint they
   stack to a single full-width column instead. 29.99rem, not 30rem, so
   this and the min-width: 30rem rules never both match. */
@media (max-width: 29.99rem) {
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { text-align: center; }
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn-primary { background: var(--fir); color: var(--surface); }
.btn-primary:hover { background: var(--field); color: var(--surface); }
.btn-secondary {
  background: var(--surface);
  color: var(--fir);
  border-color: var(--rule);
}
.btn-secondary:hover { border-color: var(--fir); color: var(--field); }

/* ---------- Cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}

/* Four cards in a three-column grid orphan the fourth on its own row.
   Anything with four items gets an explicit 2x2 instead. */
@media (min-width: 46rem) {
  .cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.2rem 1.25rem;
  box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card p, .card li { max-width: none; }

/* ---------- Definition rows (fees, hours) ---------- */

.rows { border-top: 1px solid var(--rule); margin-top: 1.1rem; max-width: 44rem; }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.68rem 0;
  border-bottom: 1px solid var(--rule);
}
.row dt, .row .row-label { font-weight: 600; color: var(--fir); margin: 0; }
/* Short values shrink to their text and space-between pushes them to the right
   edge, which is the ledger look. A value too long to sit beside its label
   wraps onto its own line and fills the row, so it reads as left-aligned prose
   rather than a right-aligned block with one word dangling on the last line. */
.row dd, .row .row-value { margin: 0; color: var(--muted); text-align: left; text-wrap: pretty; }

@media (max-width: 34rem) {
  .row { display: block; padding: 0.85rem 0; }
  .row dd, .row .row-value { margin-top: 0.15rem; }
}

/* A line that earns standing alone. Used sparingly: three or four per page
   at most, or it stops meaning anything. */
.pull {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--fir);
  max-width: 30rem;
  margin: 1.15rem 0 1.35rem;
  padding-left: 1rem;
  border-left: 2px solid var(--aspen);
}

/* ---------- Callout ---------- */

.callout {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--aspen);
  border-radius: var(--radius);
  padding: 1.05rem 1.25rem;
  margin: 1.2rem 0;
  max-width: 44rem;
}
.callout h3 { margin-top: 0; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout p, .callout li { max-width: none; }

.placeholder-note {
  background: var(--note);
  border: 1px dashed var(--aspen);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  max-width: 44rem;
}
.placeholder-note p, .placeholder-note li { max-width: none; }
.placeholder-note p:last-child { margin-bottom: 0; }

/* ---------- Prose lists ---------- */

.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 0.9em; }
.prose li { margin-bottom: 0.3em; }

.checklist { list-style: none; padding-left: 0; }
.checklist li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.42em;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--aspen);
}

/* ---------- Portrait ---------- */

/* 144px is 1.5in at CSS resolution. Squared with the same small radius and
   hairline as the cards, rather than a circle: nothing else in this identity
   is round. */
.about-head {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
.about-head-text { flex: 1 1 22rem; min-width: 0; }
.portrait { margin: 0; flex: none; }
.portrait img {
  display: block;
  width: 144px;
  height: 144px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
}
.portrait figcaption {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 144px;
  line-height: 1.35;
}

/* ---------- Logo banner ---------- */

/* The practice logo is a 768x512 raster with its text burned in. It is shown
   at native size and never upscaled, because there is no larger original.
   The page heading below it carries the real, readable text. */
.logo-banner {
  margin: 0 0 1.6rem;
  max-width: 768px;
}
.logo-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: var(--shadow);
}

/* ---------- Photograph band ---------- */

/* One photograph, mid-page, lazy-loaded so it never delays first paint.
   Deliberately not a hero backdrop: text over photography is where
   contrast promises quietly break. */
.photo-band {
  margin: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--band);
}
.photo-band img {
  display: block;
  width: 100%;
  height: clamp(13rem, 32vw, 22rem);
  object-fit: cover;
}
.photo-band figcaption {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.75rem 1.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- Inquiry form ---------- */

.inquiry { max-width: 34rem; margin-top: 1.2rem; }
.fld { margin-bottom: 0.9rem; }
.fld label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fir);
  margin-bottom: 0.3rem;
}
.fld label .opt {
  font-weight: 400;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  margin-left: 0.4rem;
}
.fld input, .fld textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
}
.fld textarea { resize: vertical; min-height: 5.5rem; }
.fld input:focus-visible, .fld textarea:focus-visible {
  outline: 2px solid var(--aspen);
  outline-offset: 1px;
  border-color: var(--aspen);
}
.fld input[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: #9C3A20; }

.fld-pair { display: grid; gap: 0 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 30rem) { .fld-pair { grid-template-columns: 1fr 1fr; } }

.fld-hint { font-size: 0.82rem; color: var(--muted); margin: -0.3rem 0 1rem; max-width: none; }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   hidden fields but not positioned ones. Never focusable. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.inquiry button { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.inquiry button[disabled] { opacity: 0.6; cursor: default; }

.form-status { margin: 0.9rem 0 0; font-size: 0.95rem; max-width: none; }
.form-status.err { color: #9C3A20; font-weight: 600; }
.form-status.ok {
  color: var(--fir);
  font-weight: 600;
  border-left: 3px solid var(--aspen);
  padding-left: 0.8rem;
}

/* ---------- Crisis strip ---------- */

/* The fir field. One deep green band on every page, holding the crisis
   resources, so someone in distress finds 988 in the same fixed place
   whichever page they landed on. Borrowed from the Ridgeline direction. */
.crisis {
  background: var(--field);
  color: var(--field-ink);
  padding-block: 2.25rem;
}
.crisis h2 {
  color: var(--field-ink);
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
}
.crisis p, .crisis li { color: var(--field-muted); max-width: 46rem; }
.crisis a { color: var(--gold-on-field); }
.crisis-list { padding-left: 1.2rem; margin: 0; }
.crisis-list li { margin-bottom: 0.4em; }
.crisis strong { color: var(--gold-on-field); font-weight: 600; }

/* ---------- Footer ---------- */

.footer {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding-block: 2.75rem 2rem;
  font-size: 0.95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
}
.footer h2 {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.8rem;
}
.footer-col p, .footer-col li { max-width: none; }
.footer-meta { color: var(--ink); line-height: 1.8; }
.footer-note { color: var(--muted); font-size: 0.87rem; margin-top: 0.9rem; }
.footer-links { list-style: none; padding: 0; margin: 0; line-height: 2; }
.footer-base {
  border-top: 1px solid var(--rule);
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  color: var(--muted);
  font-size: 0.87rem;
}
.footer-base p { max-width: 52rem; }
.footer-legal { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .masthead, .nav-toggle, .skip { display: none; }
  body { background: #FFFFFF; }
}

/* An inquiry form followed by the contact cards needs a real break between them. */
.inquiry + .cards {
  margin-top: 2.6rem;
}

/* Inheris badges, footer only. Two of them, on a row of their own under the
   footer columns, left aligned with the first column rather than centered:
   the grid's columns stop well short of the right edge, so a centered row
   floats away from everything above it.

   Both use the self-hosted mark rather than the supplied remote <img>, so no
   third party is contacted when someone reads a therapy website; that also
   means no CSP change was needed.

   The teal is #4C7F7D, not the supplied #85B6B4: white on the original is
   2.25:1, which fails WCAG AA for both the name and the smaller role line.
   Same hue, darkened until it clears 4.5:1 (it lands at 4.53:1). The navy is
   the supplied #213D51 unchanged, since white on it is already 10.9:1. */
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 2.25rem;
}
.badge-inheris {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.3rem;
  border-radius: 16px;
  text-decoration: none;
}
.badge-inheris--portal { background: #4C7F7D; }
.badge-inheris--portal:hover { background: #3F6B69; }
.badge-inheris--ambassador { background: #213D51; }
.badge-inheris--ambassador:hover { background: #1A3041; }
.badge-inheris:focus-visible { outline: 2px solid var(--aspen); outline-offset: 3px; }
.badge-inheris img { display: block; width: 42px; height: 42px; flex-shrink: 0; }
.badge-inheris .badge-text { display: flex; flex-direction: column; gap: 0.25rem; }
.badge-inheris .badge-name {
  font-family: var(--sans);
  font-size: 1.15rem; font-weight: 800; line-height: 1; color: #fff;
}
.badge-inheris .badge-role {
  font-family: var(--sans);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em;
  line-height: 1; color: #fff; text-transform: uppercase;
}

/* ---------- Mentaya partner badge ---------- */

/* The badge sits beside the out-of-network paragraph on the fees page rather
   than in the footer badge row. It reads "insurance friendly practice", which
   is only true in the narrow sense the surrounding copy explains: no plan is
   billed, and a superbill is filed by the client. Sitewide it would say the
   opposite of "this is a cash practice", so it stays next to the paragraph
   that qualifies it.

   Self-hosted, like every other asset. Mentaya supplies the badge as a hotlink
   to storage.googleapis.com, which would announce every visitor to Google and
   is blocked outright by the img-src 'self' CSP in infra/site-stack.yaml. */
.mentaya {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
  margin: 1.2rem 0;
  max-width: 44rem;
}
.mentaya-body { flex: 1 1 auto; min-width: 0; }
.mentaya-body > :first-child { margin-top: 0; }
.mentaya-body .actions { margin-bottom: 0; }
.mentaya-badge {
  flex: 0 0 auto;
  align-self: center;
  display: block;
  border-radius: 50%;
}
.mentaya-badge:focus-visible { outline: 2px solid var(--aspen); outline-offset: 4px; }
.mentaya-badge img { display: block; width: 9.5rem; height: auto; }

/* Below this the 34rem measure and a 9.5rem badge stop sitting side by side
   without squeezing the paragraph, so the badge drops under the text. */
@media (max-width: 40rem) {
  .mentaya { display: block; }
  .mentaya-badge { margin-top: 1.3rem; }
  .mentaya-badge img { width: 8rem; }
}

/* Provider login. Not for visitors, so it is set apart from the client
   facing items rather than competing with them: pushed to the far right,
   quieter, and separated by a rule. It reaches the practice management
   console, which is a different origin behind Cognito with MFA enforced and
   no self-registration. Nothing about it is a form, and it collects
   nothing here. */
/* No stretching. The ribbon is already wordmark left, nav right, so the
   last nav item IS the far right. Making the nav grow pushed it onto a row
   of its own and left the wordmark stranded above it. */
.nav-provider a {
  font-size: 0.85rem;
  color: var(--muted);
  padding-left: 0.75rem;
  border-left: 1px solid var(--rule);
  border-bottom: 2px solid transparent;
}
.nav-provider a:hover { color: var(--aspen-deep); border-bottom-color: transparent; }
@media (max-width: 45.99rem) {
  .nav-provider a { padding-left: 0; border-left: 0; }
}