/* belonging, PLLC
   Colours come from the flower head illustration in brand/: the deep teal of
   the head, the teal leaves, the pink flower and the gold one. The old site used
   Divi's default blue (#2ea3f2), which was never hers.
   Type is a system stack on purpose. The old site pulled 37 font files. */

:root {
  --ink:        #14303C;
  --ink-2:      #24505F;
  --teal:       #2E9E9E;
  --teal-dk:    #1C7376;
  --pink:       #E1728C;
  --gold:       #E5A93A;
  --paper:      #FBF8F3;
  --paper-2:    #F3EDE3;
  --card:       #FFFFFF;
  --line:       #E4DCCF;
  --muted:      #5C6B72;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 68ch;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.68 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--teal-dk); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 760px; }
.pad { padding-top: 56px; padding-bottom: 56px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; color: var(--ink); }
h1 { font-size: clamp(32px, 5.2vw, 50px); margin: 0 0 18px; letter-spacing: -0.01em; }
h2 { font-size: clamp(23px, 3vw, 30px); margin: 44px 0 14px; }
h3 { font-size: 20px; margin: 30px 0 10px; }
p { margin: 0 0 18px; max-width: var(--measure); }
.lede { font-size: clamp(18px, 2.1vw, 21px); color: var(--ink-2); line-height: 1.6; }

/* ---------- header ---------- */
header.site {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
header .bar { display: flex; align-items: center; gap: 20px; min-height: 74px; }
.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand .bmark { width: 34px; height: 34px; display: block; flex: none; }
.brand .bword { width: 196px; height: auto; display: block; }

header nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
header nav a {
  color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 8px 11px; border-radius: 7px; white-space: nowrap;
}
header nav a:hover { background: var(--paper-2); color: var(--ink); }
header nav a[aria-current="page"] { color: var(--teal-dk); background: var(--paper-2); }

.navtoggle, .burger { display: none; }

.btn {
  display: inline-block; background: var(--teal-dk); color: #fff;
  text-decoration: none; font-weight: 600; padding: 13px 24px;
  border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn.small { padding: 9px 16px; font-size: 15px; flex: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--card); border-color: var(--teal); color: var(--ink); }

/* ---------- hero ---------- */
.hero { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.hero .inner {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 46px;
  align-items: center; padding: 64px 0 60px;
}
.hero .mark { justify-self: center; }
.hero .mark img { width: 100%; max-width: 340px; display: block; }
.eyebrow {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal-dk); font-weight: 700; margin: 0 0 14px;
}
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- bands ---------- */
.band { padding: 60px 0; }
.band.alt { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 24px; display: flex; flex-direction: column;
}
.band.alt .card { background: var(--paper); }
.card h3 { margin: 0 0 8px; font-size: 19px; }
.card p { font-size: 15.5px; color: var(--muted); margin-bottom: 16px; }
.card a.more { margin-top: auto; font-weight: 600; text-decoration: none; font-size: 15px; }
.card a.more:hover { text-decoration: underline; }

/* ---------- lists ---------- */
ul.plain { list-style: none; padding: 0; margin: 0 0 18px; max-width: var(--measure); }
ul.plain li { padding: 7px 0 7px 30px; position: relative; }
ul.plain li::before {
  content: ""; position: absolute; left: 4px; top: 17px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--teal);
}
ul.plain li strong { color: var(--ink); }

ul.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 0; }
ul.tags li {
  background: var(--card); border: 1px solid var(--line); color: var(--ink-2);
  padding: 7px 14px; border-radius: 999px; font-size: 15px;
}

dl.what { margin: 20px 0 0; max-width: var(--measure); }
dl.what dt { font-weight: 700; color: var(--ink); margin-top: 18px; }
dl.what dd { margin: 4px 0 0; color: var(--muted); }

/* ---------- home intro, her photograph and the Psychology Today seal ---------- */
.intro { display: grid; grid-template-columns: 1fr 300px; gap: 46px; align-items: start; }
.who img { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.who .sx-verified-seal { display: block; margin-top: 18px; }
/* Their script paints the seal on as a background-image and sets an explicit
   186x60, so there is nothing to size here, only to space. */
.seal-inline { margin-top: 26px; }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: 320px 1fr; gap: 46px; align-items: start; }
.about img { border-radius: 12px; border: 1px solid var(--line); display: block; }

/* ---------- contact ---------- */
.crisis-top {
  background: #FDF1F3; border: 1px solid #F0C9D2; border-left: 5px solid var(--pink);
  border-radius: 10px; padding: 18px 22px; margin: 0 0 34px;
}
.crisis-top p { margin: 0; max-width: none; }

.info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 26px 0 0; }
.info .card p { margin-bottom: 0; color: var(--ink-2); font-size: 16px; }
.info .card h3 { margin-top: 0; }

.rate {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px 24px; margin-top: 26px;
}
.rate .amount { font-family: var(--serif); font-size: 30px; color: var(--ink); display: block; }

.woods { width: 100%; border-radius: 12px; border: 1px solid var(--line); margin-top: 10px; }

/* ---------- footer ---------- */
footer.site {
  background: var(--ink); color: #D6E1E5; margin-top: 70px;
  padding: 40px 0 30px; font-size: 15px;
}
footer.site h2 {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8FB0B9; margin: 0 0 6px; font-weight: 700;
}
footer.site h2 + p { margin-bottom: 18px; }
footer.site a { color: #fff; }
footer.site p { max-width: none; }
footer .crisis {
  background: rgba(225, 114, 140, 0.14); border: 1px solid rgba(225, 114, 140, 0.45);
  border-radius: 10px; padding: 14px 18px; margin: 0 0 30px; color: #FBEAEE;
}
footer .crisis a { color: #fff; }
.fgrid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 30px; }
.fgrid .small { color: #B9CCD2; margin-bottom: 14px; }
.fine {
  border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 30px; padding-top: 18px;
  color: #8FB0B9; font-size: 13px;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero .inner { grid-template-columns: 1fr; gap: 30px; padding: 46px 0 44px; }
  .hero .mark { order: -1; }
  .hero .mark img { max-width: 230px; }
  .cards, .info { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; gap: 26px; }
  .about img { max-width: 300px; }
  .intro { grid-template-columns: 1fr; gap: 30px; }
  .who { max-width: 300px; }
  .fgrid { grid-template-columns: 1fr; gap: 22px; }

  /* One row: wordmark, then the phone number, then the menu button. Explicit
     order, because the phone button sits last in the markup so that keyboard
     and screen reader users reach the navigation before it. */
  header .bar { flex-wrap: wrap; min-height: 60px; gap: 8px; }
  .brand { order: 1; gap: 7px; }
  .brand .bmark { width: 26px; height: 26px; }
  .brand .bword { width: 122px; }
  .btn.small { order: 2; margin-left: auto; font-size: 13.5px; padding: 8px 12px; }
  .burger {
    display: block; order: 3; cursor: pointer;
    padding: 11px 9px; border: 1px solid var(--line); border-radius: 8px;
  }
  .burger span, .burger span::before, .burger span::after {
    display: block; width: 22px; height: 2px; background: var(--ink); content: "";
  }
  .burger span::before { transform: translateY(-7px); }
  .burger span::after { transform: translateY(5px); }
  header nav { display: none; order: 4; width: 100%; margin: 0 0 10px; flex-direction: column; gap: 0; }
  .navtoggle:checked ~ nav { display: flex; }
  header nav a { padding: 13px 10px; border-bottom: 1px solid var(--line); border-radius: 0; }
}

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

@media print {
  header.site, .actions, .burger { display: none; }
  body { background: #fff; font-size: 12pt; }
  footer.site { background: #fff; color: #000; }
}