/* Monet Behavioral Health Center: shared design system. Mobile-first, self-hosted fonts. */

/* Fonts */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2');
}

/* Tokens */
:root{
  /* brand */
  --color-primary: #1976d0;
  --color-primary-hover: #135ea6;
  --color-primary-soft: #e7edf5;
  --color-accent: #ff9900;
  --color-accent-text: #a35c00;

  /* neutrals */
  --color-ink: #14203b;
  --color-ink-soft: #3a465e;
  --color-muted: #5b6472;
  --color-bg: #f5f7fa;
  --color-surface: #ffffff;
  --color-bg-deep: #e7edf5;
  --color-ink-deep: #0e1729;
  --color-line: #d4dde8;

  /* state */
  --color-success: #1a7f5a;
  --color-error: #b3261e;
  --color-focus: #ff9900;

  /* link text: 6.15:1 on bg, 5.61:1 on bg-deep */
  --color-link: #135ea6;

  --wrap: 1160px;
  --wrap-narrow: 720px;
  --gutter: 20px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --ease-out-expo:  cubic-bezier(.16,1,.3,1);
  --ease-out-quart: cubic-bezier(.25,1,.5,1);
  --dur-micro: 220ms;
  --dur-sheet: 260ms;

  --header-h: 64px;
  --callbar-h: 64px;
}
@media (min-width: 768px){
  :root{ --gutter: 32px; }
}
@media (min-width: 1024px){
  :root{ --gutter: 40px; --header-h: 76px; }
}

/* Reset */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
/* call bar height reserved below 768; html carries the footer colour under it */
@media (max-width: 767px){
  html{ background: var(--color-ink-deep); }
  body{ padding-bottom: var(--callbar-h); }
}
@media (min-width: 768px){ body{ font-size: 1.125rem; } }
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; background: none; border: none; }
h1,h2,h3,h4,p,ul,ol,figure{ margin: 0; }
ul{ padding: 0; list-style: none; }
::selection{ background: var(--color-primary-soft); color: var(--color-ink); }

h1,h2,h3{
  font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  font-weight: 600;
  color: var(--color-ink);
  text-wrap: balance;
}
h1{ font-size: clamp(2rem, 5vw + 1rem, 3.25rem); line-height: 1.12; letter-spacing: -0.01em; }
h2{ font-size: clamp(1.5rem, 2.2vw + .8rem, 2.125rem); line-height: 1.2; letter-spacing: -0.005em; }
h3{ font-size: clamp(1.1875rem, 1vw + .8rem, 1.4375rem); line-height: 1.3; }
p{ text-wrap: pretty; max-width: 68ch; }
.lead{ font-size: 1.125rem; line-height: 1.55; color: var(--color-ink-soft); }
@media (min-width: 768px){ .lead{ font-size: 1.25rem; } }
small{ font-size: 0.9375rem; line-height: 1.55; color: var(--color-muted); }

.tabular{ font-variant-numeric: tabular-nums; }

/* focus */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Layout primitives */
.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wrap-narrow{
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* long-form column: 720px measure on the page's single left edge */
.wrap-narrow > *{ max-width: calc(var(--wrap-narrow) - 2 * var(--gutter)); }
.section{
  padding-top: 56px;
  padding-bottom: 56px;
}
@media (min-width: 768px){
  .section{ padding-top: 80px; padding-bottom: 80px; }
}
@media (min-width: 1024px){
  .section{ padding-top: 104px; padding-bottom: 104px; }
}
.section-tight{
  padding-top: 40px;
  padding-bottom: 40px;
}
@media (min-width: 768px){ .section-tight{ padding-top: 56px; padding-bottom: 56px; } }

.bg-deep{ background: var(--color-bg-deep); }
.bg-ink-deep{ background: var(--color-ink-deep); color: #fff; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.eyebrow .dot{
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* step rule: gold, 32px, steps up once (8.3) */
.step-rule{
  position: relative;
  display: block;
  width: 32px; height: 9px;
  margin-bottom: 14px;
}
.step-rule::before{
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 18px; height: 3px;
  background: var(--color-accent);
}
.step-rule::after{
  content: '';
  position: absolute; left: 15px; top: 0;
  width: 17px; height: 9px;
  border-top: 3px solid var(--color-accent);
  border-left: 3px solid var(--color-accent);
}

/* two-column band from 1024, 5/7 of the 12-col grid */
.split{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "head" "body" "aside";
  gap: 20px;
}
.split-head{ grid-area: head; min-width: 0; }
.split-body{ grid-area: body; min-width: 0; }
.split-aside{ grid-area: aside; min-width: 0; }
.split-body > p + p, .split-body > * + p{ margin-top: 14px; }
.split-body > .proof-endorsement + p{ margin-top: 20px; }
.split-body > .proof-endorsement:first-child{ border-top: 0; padding-top: 0; }
.split-body > .chip-row{ margin-top: 20px; }
.split-body > .faq{ margin-top: 0; }
.split-body > .ledger{ margin-top: 0; }
.split-body > .btn, .split-body > .hero-cta{ margin-top: 20px; }
.split-head > p{ margin-top: 14px; }
.split-head .map-fallback{ margin-top: 20px; }
.split-body > form{ margin-top: 0; }
.split-body > .form-success{ margin-bottom: 20px; }
.split-body form .btn{ margin-top: 20px; }
@media (min-width: 1024px){
  .split{
    grid-template-columns: 5fr 7fr;
    grid-template-areas: "head body" "aside body";
    column-gap: 48px;
    row-gap: 32px;
    align-items: start;
    grid-template-rows: auto 1fr;
  }
  .split-even{ grid-template-columns: 1fr 1fr; }
  .split-head h2{ max-width: 20ch; }
  .split-aside{ align-self: start; }
}

/* hairline rows (fact rows, modality rows) */
.row-list{ border-top: 1px solid var(--color-line); }
.row-list > div, .row-list > li{
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
}
.row-list h3{ font-size: 1.125rem; }
.row-list p{ margin-top: 4px; font-size: 0.9375rem; color: var(--color-ink-soft); }
.row-list .name{ font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 1rem; color: var(--color-ink); }

/* Skip link */
.skip-link{
  position: absolute;
  left: 12px; top: -60px;
  background: var(--color-primary); color: #fff;
  padding: 10px 16px; border-radius: 6px;
  font-weight: 600; font-size: 14px;
  z-index: 200;
  transition: top var(--dur-micro) var(--ease-out-quart);
}
.skip-link:focus{ top: 12px; }

/* Header */
.site-header{
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-out-quart);
}
.site-header.is-scrolled{ border-bottom-color: var(--color-line); }
.site-header .wrap{
  display: flex; align-items: center;
  flex-wrap: nowrap;
  height: 100%;
  gap: 12px;
  min-width: 0;
}
.brand-link{ display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; }
.brand-link img{ height: 40px; width: 40px; flex-shrink: 0; }
@media (min-width: 1024px){ .brand-link img{ height: 44px; width: 44px; } }
.brand-name{
  display: none;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600; font-size: 17px;
  color: var(--color-ink);
  white-space: nowrap;
}
/* practice name beside the logo from 1280 */
@media (min-width: 1280px){ .brand-name{ display: inline; } }

.nav-desktop{ display: none; }
@media (min-width: 1024px){
  .site-header .wrap{ gap: 24px; }
  .nav-desktop{ display: flex; align-items: center; gap: 22px; margin-left: auto; flex-shrink: 0; }
  .nav-desktop a{
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 500; font-size: 0.9375rem;
    color: var(--color-ink);
    position: relative;
    padding-bottom: 8px;
    white-space: nowrap;
  }
  .nav-desktop a:hover{ color: var(--color-link); }
  .nav-desktop a[aria-current="page"]{ font-weight: 600; }
  .nav-desktop a[aria-current="page"]::after{
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background: var(--color-accent);
    transform: translateY(6px);
  }
}
.header-right{
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; flex-shrink: 0;
}
@media (min-width: 1024px){ .header-right{ gap: 12px; margin-left: 0; } }

.call-pill{
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-link);
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600; font-size: 15px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--dur-micro) var(--ease-out-quart);
}
.call-pill:hover{ background: var(--color-primary-soft); }
.call-pill svg{ width: 16px; height: 16px; flex-shrink: 0; }
.call-pill .full-label{ display: inline; }
.call-pill .short-label{ display: none; }
@media (max-width: 479px){
  .call-pill .full-label{ display: none; }
  .call-pill .short-label{ display: inline; }
  .call-pill{ padding: 0 14px; }
}
/* book pill: "Book" below 1024, "Book online" on desktop */
.btn.header-book{ height: 44px; padding: 0 16px; white-space: nowrap; flex-shrink: 0; width: auto; }
.header-book .full-label{ display: none; }
.header-book .short-label{ display: inline; }
@media (min-width: 1024px){
  .btn.header-book{ padding: 0 22px; }
  .header-book .full-label{ display: inline; }
  .header-book .short-label{ display: none; }
}

.menu-trigger{
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; flex-shrink: 0;
}
.menu-trigger .r1{ width: 20px; height: 2px; background: var(--color-ink); }
.menu-trigger .r2{ width: 14px; height: 2px; background: var(--color-ink); align-self: flex-start; margin-left: 12px; }
@media (min-width: 1024px){ .menu-trigger{ display: none; } }

.mobile-sheet{
  position: fixed; inset: 0; z-index: 150;
  width: 100%; max-width: 100vw;
  background: var(--color-bg);
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  transition: transform var(--dur-sheet) var(--ease-out-expo);
  overflow-y: auto; overflow-x: hidden;
}
.mobile-sheet.is-open{ transform: translateY(0); }
.mobile-sheet-top{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--header-h);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--color-line);
}
.mobile-sheet-top .brand-name{ display: inline; white-space: normal; font-size: 15px; line-height: 1.2; }
.mobile-sheet-close{
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--color-ink);
}
.mobile-sheet-nav{ flex: 1; padding: 8px var(--gutter) 0; }
.mobile-sheet-nav a{
  display: flex; align-items: center;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500; font-size: 1.1rem;
  color: var(--color-ink);
  height: 52px;
  border-bottom: 1px solid var(--color-line);
}
.mobile-sheet-cta{
  padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-line);
  display: flex; flex-direction: column; gap: 10px;
}
.mobile-sheet-cta .btn{ width: 100%; padding-left: 12px; padding-right: 12px; }

/* Buttons */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px;
  padding: 0 26px;
  height: 44px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600; font-size: 1rem;
  letter-spacing: 0.01em;
  transition: background var(--dur-micro) var(--ease-out-quart), transform var(--dur-micro) var(--ease-out-quart), border-color var(--dur-micro) var(--ease-out-quart);
  border: 1.5px solid transparent;
}
.btn-primary{ background: var(--color-primary); color: #fff; }
.btn-primary:hover{ background: var(--color-primary-hover); }
.btn-primary:active{ transform: translateY(1px); }
/* secondary label: --color-link, 6.15:1 on bg, 5.61:1 on bg-deep */
.btn-secondary{ background: transparent; color: var(--color-link); border-color: var(--color-link); }
.btn-secondary:hover{ background: var(--color-primary-soft); }
.btn-secondary:active{ transform: translateY(1px); }
.btn-on-dark{ background: #fff; color: var(--color-primary); }
.btn-on-dark:hover{ background: var(--color-bg-deep); }
.btn-on-dark:active{ transform: translateY(1px); }
.btn-lg{ height: 52px; padding: 0 28px; }
.btn-block{ width: 100%; }
@media (max-width: 479px){ .btn{ width: 100%; } .btn.header-book{ width: auto; } }

.link-in-text{
  color: var(--color-link);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-in-text:hover{ text-decoration-thickness: 2px; }

/* Hero */
.hero{
  padding-top: 32px;
  padding-bottom: 48px;
}
@media (min-width: 1024px){ .hero{ padding-top: 40px; padding-bottom: 72px; } }
.hero-grid{ display: block; }
@media (min-width: 1024px){
  .hero-grid{ display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: stretch; }
  .hero-copy{ padding-top: 24px; padding-bottom: 8px; }
}
.hero-eyebrow{ margin-bottom: 18px; flex-wrap: wrap; row-gap: 4px; }
.hero-eyebrow > span{ display: inline-flex; align-items: center; }
@media (max-width: 479px){
  .hero-eyebrow{ flex-direction: column; align-items: flex-start; }
  .hero-eyebrow .dot-mid{ display: none; }
}
.hero h1{ max-width: 20ch; }
.hero-opener{ margin-top: 18px; max-width: 46ch; }
.hero-cta{ margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 480px){ .hero-cta{ flex-direction: row; } }
/* right half: tint panel sized to the column, arcs fill it (6.2, 8.1) */
.hero-panel{ display: none; }
@media (min-width: 1024px){
  .hero-panel{
    display: block; position: relative; overflow: hidden;
    background: var(--color-bg-deep);
    border: 1px solid var(--color-line);
    border-radius: 14px;
    min-height: 420px;
    color: var(--color-primary);
  }
  .hero-panel svg{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: .7; }
  .hero-panel-nap{
    position: absolute; left: 28px; bottom: 24px; right: 28px;
    display: flex; flex-direction: column; gap: 4px;
    color: var(--color-ink);
  }
  .hero-panel-nap .eyebrow{ margin-bottom: 6px; }
  .hero-panel-nap a{ font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 0.9375rem; color: var(--color-ink); }
  .hero-panel-nap a:hover{ color: var(--color-link); }
}

/* trust chips */
.trust-chip-row{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.chip{
  display: inline-flex; align-items: center;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500; font-size: 15px;
  color: var(--color-ink);
  background: var(--color-bg-deep);
}
.bg-deep .chip{ background: var(--color-surface); }

/* Page header (interior pages) */
.page-header{
  background: var(--color-bg-deep);
  padding-top: 40px;
  padding-bottom: 40px;
}
@media (min-width: 768px){ .page-header{ padding-top: 56px; padding-bottom: 48px; } }
.page-header h1{ max-width: 22ch; }
.page-header .lead{ margin-top: 14px; max-width: 56ch; }
.page-header .hero-cta{ margin-top: 24px; }
.page-header-grid{ display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 1024px){
  .page-header-grid{ grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; }
  .page-header-grid .tldr{ margin-top: 0; }
}

/* breadcrumb (visually minimal, text only) */
.breadcrumb{ font-size: 0.875rem; color: var(--color-muted); margin-bottom: 16px; }
.breadcrumb a{ color: var(--color-muted); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb a:hover{ color: var(--color-link); }

/* TLDR box */
.tldr{
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 20px 24px;
  margin-top: 28px;
  box-shadow: 0 1px 2px rgba(20,32,59,.06);
}
.tldr-label{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 10px;
  display: block;
}
.tldr p{ margin-top: 8px; font-size: 0.9375rem; color: var(--color-ink-soft); }
.tldr p:first-of-type{ margin-top: 0; }
.tldr strong{ color: var(--color-ink); }

/* Section heading wrapper */
.section h2{ margin-top: 0; }
.band-label{ margin-bottom: 20px; }

/* Service card (contract 6.4) */
.card-grid{ display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
@media (min-width: 768px){ .card-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .card-grid{ grid-template-columns: 1fr 1fr 1fr; gap: 24px; } }
.card{
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(20,32,59,.06);
  transition: border-color 120ms ease;
  display: flex; flex-direction: column;
  min-width: 0;
}
.card:hover{ border-color: var(--color-primary); }
.card-top{ display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-motif{ width: 28px; height: 28px; color: var(--color-primary); flex-shrink: 0; }
.card-motif svg{ width: 100%; height: 100%; display: block; }
.card .eyebrow{ margin: 0; }
.card h2, .card h3{
  font-size: clamp(1.1875rem, 1vw + .8rem, 1.4375rem); line-height: 1.3; letter-spacing: 0;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}
.card p{ font-size: 1rem; color: var(--color-ink-soft); max-width: none; }
.card p + p{ margin-top: 10px; }
.card .btn{ margin-top: auto; align-self: flex-start; }
.card p + .btn{ margin-top: 18px; }
/* contact: booking card wide, call and email beneath */
@media (min-width: 768px){
  .contact-grid{ grid-template-columns: 1fr 1fr; }
  .contact-grid .card:first-child{ grid-column: 1 / -1; }
}

/* FAQ accordion */
.faq{ border-top: 1px solid var(--color-line); margin-top: 24px; }
.faq details{ border-bottom: 1px solid var(--color-line); }
.faq summary{
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600; font-size: 17px;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary .chevron{
  flex-shrink: 0; margin-left: 16px;
  width: 20px; height: 20px;
  transition: transform var(--dur-micro) var(--ease-out-quart);
}
.faq details[open] summary .chevron{ transform: rotate(90deg); }
.faq details[open] summary{ background: var(--color-bg-deep); margin: 0 -4px; padding-left: 4px; padding-right: 4px; border-radius: 6px 6px 0 0; }
.bg-deep .faq details[open] summary{ background: var(--color-surface); }
.faq-answer{ padding: 0 0 20px; color: var(--color-ink-soft); font-size: 0.9375rem; max-width: 68ch; }

/* Proof block */
.proof-block{ display: flex; flex-direction: column; gap: 28px; }
.proof-stat{ font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 1.0625rem; max-width: 30ch; }
.proof-stat .cap{ display: block; margin-top: 4px; font-weight: 500; }
.proof-stat a{ color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
.proof-quote{ position: relative; }
.proof-quote .quote-mark{ color: var(--color-accent); font-size: 2rem; line-height: 1; display: block; margin-bottom: 4px; font-family: 'Source Serif 4', serif; }
.proof-quote blockquote{ font-family: 'Source Serif 4', serif; font-weight: 600; font-size: clamp(1.1875rem, 1vw + .8rem, 1.4375rem); line-height: 1.4; margin: 0; max-width: 30ch; }
.proof-quote cite{ display: block; margin-top: 12px; font-style: normal; font-size: 0.875rem; color: var(--color-muted); }
.proof-endorsement{ padding-top: 24px; border-top: 1px solid var(--color-line); }
.proof-endorsement p{ font-size: 1rem; max-width: 60ch; }
.proof-endorsement .who{ display: block; margin-top: 10px; font-size: 0.875rem; color: var(--color-muted); font-weight: 600; }

/* Maps embed */
.map-frame{
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--color-line);
  aspect-ratio: 4/3;
}
@media (min-width: 768px){ .map-frame{ aspect-ratio: 16/9; } }
@media (min-width: 1024px){
  .split-even .split-body{ display: grid; }
  .split-even .map-frame{ aspect-ratio: auto; height: 100%; min-height: 340px; }
}
.map-frame iframe{ width: 100%; height: 100%; border: 0; display: block; }
.map-fallback{ margin-top: 20px; }
.map-fallback p{ font-size: 0.9375rem; }

/* Insurance / condition chips row */
.chip-row{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* Contact form */
.form-field{ margin-top: 20px; }
.form-field:first-child{ margin-top: 0; }
.form-field label{
  display: block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600; font-size: 0.9375rem;
  color: var(--color-ink);
  margin-bottom: 8px;
}
.form-field input, .form-field textarea{
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  height: 48px;
  padding: 0 14px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  color: var(--color-ink);
}
.form-field textarea{ height: auto; padding: 12px 14px; min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus{
  border-color: var(--color-primary);
}
.form-privacy-note{ margin: 20px 0; color: var(--color-muted); font-size: 0.875rem; }
.form-error{ color: var(--color-error); font-size: 0.8125rem; margin-top: 6px; }
.form-error[hidden]{ display: none; }
.form-success{
  display: none;
  background: var(--color-surface);
  border-left: 3px solid var(--color-success);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin-bottom: 20px;
  font-size: 0.9375rem;
  color: var(--color-ink);
}
.form-success.is-visible{ display: block; }
.form-failure{
  display: none;
  background: var(--color-surface);
  border-left: 3px solid var(--color-error);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin-bottom: 20px;
  font-size: 0.9375rem;
  color: var(--color-ink);
}
.form-failure.is-visible{ display: block; }
.form-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-field .form-privacy-note{ margin: 8px 0 0; }

/* Call band */
.call-band{ position: relative; overflow: hidden; }
.call-band-grid{ display: flex; flex-direction: column; gap: 20px; align-items: flex-start; position: relative; z-index: 1; }
.call-band h2{ color: #fff; margin-bottom: 10px; }
.call-band p{ color: var(--color-bg-deep); margin-bottom: 20px; max-width: 50ch; }
.call-band-cta{ display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 480px){ .call-band-cta{ flex-direction: row; align-items: center; } }
.call-band .tel-big{
  font-family: 'Source Serif 4', serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #fff;
}
.call-band-motif{ position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; color: #fff; opacity: .08; }
@media (min-width: 1024px){ .call-band-motif{ width: 300px; height: 300px; } }

/* Crisis strip */
.crisis-strip{
  background: var(--color-bg-deep);
  border-top: 1px solid var(--color-line);
  padding: 20px 0;
}
.crisis-strip p{ font-size: 0.9375rem; color: var(--color-ink); max-width: none; }
.crisis-strip a{ color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }

/* Footer */
.site-footer{ background: var(--color-ink-deep); color: #fff; }
.footer-grid{ display: grid; grid-template-columns: 1fr; gap: 36px; padding-top: 48px; padding-bottom: 32px; }
@media (min-width: 1024px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } }
.footer-logo-plate{
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 999px;
  height: 56px; width: 56px; padding: 10px;
}
.footer-logo-plate img{ width: 100%; height: 100%; object-fit: contain; }
.footer-nap{ margin-top: 16px; display: flex; flex-direction: column; }
.footer-nap a{ display: block; padding: 10px 0; color: rgba(255,255,255,.78); font-size: 0.9375rem; }
.footer-nap a:hover{ color: #fff; }
.footer-nap .fname{ color: #fff; font-weight: 600; font-size: 1rem; }
.footer-label{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-bottom: 14px;
  display: block;
}
.footer-zone p{ color: rgba(255,255,255,.78); font-size: 0.9375rem; margin-top: 8px; }
.footer-zone .btn{ margin-top: 14px; }
.footer-links a{ display: block; padding: 10px 0; color: rgba(255,255,255,.78); font-size: 0.9375rem; }
.footer-links a:hover{ color: #fff; }
.footer-practice p{ color: rgba(255,255,255,.62); font-size: 0.875rem; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 20px 0 12px;
  color: rgba(255,255,255,.62);
  font-size: 0.8125rem;
}
/* agency credit inside the footer: white .62 on ink-deep = 7.3:1 */
.footer-credit{
  padding: 0 0 20px;
  color: rgba(255,255,255,.62);
  font-size: 0.8125rem;
}

/* Sticky mobile call bar */
.mobile-call-bar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  height: var(--callbar-h);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding-left: 10px; padding-right: 10px;
  align-items: center;
  transform: translateY(100%);
  transition: transform var(--dur-sheet) var(--ease-out-expo);
}
.mobile-call-bar.is-visible{ transform: translateY(0); }
.mobile-call-bar .btn{ height: 44px; padding: 0 10px; font-size: 14px; }
@media (min-width: 768px){ .mobile-call-bar{ display: none; } }

/* Portrait / photo blocks */
.portrait-plate{
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--color-line);
  box-shadow: 0 1px 2px rgba(20,32,59,.06);
}
.portrait-plate img{ width: 100%; height: auto; display: block; }
.about-hero-grid{ display: block; }
@media (min-width: 1024px){
  .about-hero-grid{ display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
}
.about-portrait{ margin-top: 32px; max-width: 320px; }
@media (min-width: 1024px){ .about-portrait{ margin-top: 0; order: 2; } }

.director-block{ display: flex; gap: 20px; align-items: flex-start; }
.director-photo{ width: 96px; height: 101px; border-radius: 10px; overflow: hidden; border: 1px solid var(--color-line); flex-shrink: 0; }
.director-photo img{ width: 100%; height: 100%; object-fit: cover; }
.director-facts p{ margin-top: 4px; font-size: 0.9375rem; }
.director-facts .name{ font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 1.0625rem; color: var(--color-ink); }

.credentials-photo{ max-width: 220px; }
.credentials-photo .frame{ border-radius: 10px; overflow: hidden; border: 1px solid var(--color-line); }
.credentials-photo img{ width: 100%; height: auto; display: block; }
.credentials-photo figcaption{ margin-top: 8px; font-size: 0.875rem; color: var(--color-muted); line-height: 1.45; }

/* Insurance list */
.insurance-list{ margin-top: 24px; }

/* Ledger (fact rows: credentials) */
.ledger{ border-top: 1px solid var(--color-line); max-width: 68ch; }
.ledger-row{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
}
.ledger-row .k{ font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 0.9375rem; color: var(--color-ink-soft); }
.ledger-row .v{ font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 0.9375rem; color: var(--color-ink); text-align: right; }

/* Drawn motifs */
.motif{ color: var(--color-primary); stroke: currentColor; fill: none; }
.ohio-motif{ width: 140px; height: 152px; display: block; }
@media (min-width: 1024px){ .ohio-motif{ width: 180px; height: 196px; } }

/* back-link strip at the foot of a page */
.backlink p{ padding-left: 16px; border-left: 3px solid var(--color-accent); font-size: 1rem; }

/* Article body (legal pages) */
.article-body{ font-size: 1rem; line-height: 1.75; color: var(--color-ink-soft); }
.article-body h2{ font-size: 1.4rem; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--color-line); }
.article-body h2:first-child{ margin-top: 0; padding-top: 0; border-top: none; }
.article-body p{ margin-top: 14px; max-width: none; }
.article-body ul{ margin-top: 14px; }
.article-body li{ position: relative; padding-left: 20px; margin-top: 8px; }
.article-body li::before{ content: ''; position: absolute; left: 0; top: 0.6em; width: 10px; height: 2px; background: var(--color-primary); }

/* 404 */
.error-page{ padding: 96px 0; text-align: left; }
.error-links{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

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

@media print{ .site-header, .mobile-call-bar, .menu-trigger, .mobile-sheet{ display: none !important; } }