/* belonging, PLLC
   Colours are taken from her own brand illustration: the deep teal 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; flex: none; }
.brand img { width: 230px; 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: 300px; }
.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); }

/* ---------- 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: 200px; }
  .cards, .info { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; gap: 26px; }
  .about img { 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; }
  .brand img { width: 138px; }
  .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; }
}