/* Donor recognition: a warm, editorial extension of the BariNation brand.
   Keep the existing markup so the CMS and static page share this design. */
body { background: var(--paper); }
  .c3-nav{ position:sticky; top:0; z-index:50; background:var(--navy); color:#fff; }
  .c3-nav .wrap{ display:flex; align-items:center; gap:30px; height:74px; }
  .c3-nav .brandlock .name{ color:#fff; }
  .c3-nav nav{ display:flex; gap:26px; margin-left:auto; }
  .c3-nav nav a{ font-weight:600; font-size:15px; color:rgba(255,255,255,.82); white-space:nowrap; }
  .c3-nav nav a:hover{ color:var(--gold); }
  .c3-nav nav a.active{ color:#fff; border-bottom:2px solid var(--gold); padding-bottom:4px; }


/* A quiet thank-you, framed by circles of support. */
main .c3-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-900);
  color: #fff;
}
main .c3-hero .blocks { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
main .c3-hero .blocks i {
  position: absolute;
  display: block;
  width: 560px;
  height: 560px;
  border: 1px solid #dcefe424;
  border-radius: 50%;
}
main .c3-hero .b1 { left: -380px; top: -260px; box-shadow: 0 0 0 65px #dcefe409, 0 0 0 130px #dcefe406; }
main .c3-hero .b2 { right: -360px; bottom: -350px; box-shadow: 0 0 0 65px #f0a52c08, 0 0 0 130px #f0a52c05; }
main .c3-hero .blocks .b3 { display: none; }
main .c3-hero .wrap { padding: 78px 32px 84px; }
main .c3-hero .inner { max-width: 840px; margin: auto; text-align: center; }
main .c3-hero .chip {
  padding: 0;
  background: none;
  color: #dcefe4;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: normal;
}
main .c3-hero .chip::before { content: ''; width: 24px; height: 1px; margin-right: 10px; background: var(--gold); }
main .c3-hero h1 { color: #fff; font-size: clamp(46px, 5.7vw, 76px); line-height: 1.02; font-weight: 400; letter-spacing: -.035em; margin: 26px auto 24px; max-width: 18ch; }
main .c3-hero h1 b { color: var(--gold); font-style: italic; font-weight: 400; }
main .c3-hero p { max-width: 57ch; margin: 0 auto; font-size: 18px; line-height: 1.75; color: #d4e0e9; }
main .c3-hero .row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
main .btn { box-shadow: none; }
main .btn-ghost { box-shadow: inset 0 0 0 1px #143a5c55; }
main .btn-lg { font-size: 16px; padding: 16px 28px; }
main section.block { padding: 88px 0; }
main .sec-head { max-width: 620px; margin: 0 auto 42px; text-align: center; }
main .sec-head h2 { font-size: clamp(36px, 4vw, 48px); font-weight: 400; margin: 12px 0 14px; }
main .sec-head p { font-size: 18px; color: var(--ink-soft); }
main .eyebrow { color: #14756e; font-size: 11px; letter-spacing: .18em; }

/* Names have the rhythm of an honor roll, with no button-like pills. */
main .dwall { background: var(--paper); }
main .dwall .top { text-align: center; margin-bottom: 44px; }
main .dwall .top h2 { font-size: clamp(34px, 3.8vw, 46px); font-weight: 400; margin-bottom: 14px; }
main .dwall .top > span { color: #14756e; font-size: 14px; letter-spacing: .025em; }
main .dtier { --corner: #9a8cc8; --corner-art: url(donors/tier-friend.svg); position: relative; overflow: hidden; isolation: isolate; padding: 40px; margin-bottom: 24px; background: #f4f2f9; border: 1px solid #e1dcee; border-radius: 16px; }
/* A fine-line corner mark in each tier's color, fading out from the top left. */
main .dtier::after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 240px; height: 240px; background: var(--corner); opacity: .55; pointer-events: none;
  -webkit-mask: var(--corner-art) top left / contain no-repeat; mask: var(--corner-art) top left / contain no-repeat; }
main .dtier:has(.gold) { --corner: #c9a35a; --corner-art: url(donors/tier-industry.svg); }
main .dtier:has(.champ) { --corner: #14756e; --corner-art: url(donors/tier-medical.svg); background: #eef6f2; border-color: #d3e8de; }
main .dtier:has(.champ)::after { opacity: .4; }
main .dtier:has(.gold) { position: relative; overflow: hidden; background: linear-gradient(180deg, #fbf6e9 0%, var(--cream) 100%); border: 1px solid #eadfc2; border-radius: 16px; padding: 44px 40px 40px; margin-bottom: 24px; box-shadow: 0 28px 50px -40px #143a5c59; }
main .dtier:has(.gold)::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, transparent, #c9a35a 25%, #c9a35a 75%, transparent); }
main .dtier .label { display: flex; align-items: center; justify-content: center; gap: 12px; color: #14756e; font: 700 11px/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 24px; }
main .dtier:has(.gold) .label { gap: 18px; margin-bottom: 30px; color: var(--navy); font: 400 28px/1.2 var(--serif); letter-spacing: -.01em; text-transform: none; }
main .dtier:has(.gold) .label::before,
main .dtier:has(.gold) .label::after { content: ''; flex: 0 0 56px; height: 1px; background: #c9a35a; }
main .dnames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 24px; }
main .dnames .n { text-align: center; align-self: center; white-space: normal; overflow-wrap: anywhere; color: var(--navy); }
main .dnames.gold .n { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.3; }
main .dnames.champ .n { font-size: 17px; font-weight: 600; }
main .dnames.friend .n { font-size: 15px; color: var(--ink-soft); }
/* Industry donors: logos on matching white tiles, centered and evenly spaced. */
main .dnames.gold { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 36px; }
main .dnames.gold .n { flex: 0 1 220px; align-self: flex-start; }
main .dnames .n.logo { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
main .dnames .mark { width: 100%; height: 120px; display: flex; align-items: center; justify-content: center; padding: 18px; background: #fff; border: 1px solid #ece3cd; border-radius: 10px; box-shadow: 0 10px 22px -18px #143a5c4d; }
main .dnames .mark img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
main .dnames figcaption { color: var(--navy); font: 600 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
main .dnames figcaption .lead { display: block; margin-top: 4px; color: var(--ink-soft); font: italic 400 14px/1.4 var(--serif); letter-spacing: 0; text-transform: none; }

/* Medical supporters: practice logos first, then individual doctors and
   supporters as a centered row of names. */
main .dnames.champ { display: block; }
main .dnames.champ .dlogos { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 40px; }
main .dnames.champ .dlogos .n { flex: 0 1 280px; align-self: flex-start; }
main .dnames.champ .dlogos .mark { height: 110px; padding: 20px 26px; }
main .dnames.champ .dpeople { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px; max-width: 760px; margin: 0 auto; }
main .dnames.champ .dlogos + .dpeople { margin-top: 30px; padding-top: 28px; border-top: 1px solid #e8e3d6; }
main .dnames.champ .dpeople .n { font: 400 22px/1.3 var(--serif); color: var(--navy); }
main .dnames .n.more { color: #14756e; font-style: italic; }
main .honor-roll-preview { margin: 0 0 22px; text-align: center; font-size: 14px; color: var(--ink-soft); font-style: italic; }
main .dwall [hidden] { display: none; }

/* Giving circles: consistent cards, with the foundation in the spotlight. */
main .gcircles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
main .gcircle { display: flex; flex-direction: column; align-items: flex-start; padding: 34px 30px; border: 1px solid #e4ddcb; border-radius: 12px; background: var(--paper); }
main .gcircle.feat { background: var(--navy); border-color: var(--navy); box-shadow: 0 18px 34px -24px #0e2b4566; }
main .gcircle .ring { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 28px; }
main .gcircle h3 { font-size: 29px; font-weight: 400; margin-bottom: 14px; }
main .gcircle .amt { color: var(--navy); font-size: 26px; font-weight: 700; letter-spacing: -.04em; margin-bottom: 16px; }
main .gcircle p { font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 28px; }
main .gcircle.feat h3 { color: #fff; }
main .gcircle.feat .amt { color: #ffc366; }
main .gcircle.feat p { color: #dce6ee; }
main .gcircle .btn { margin-top: auto; justify-content: center; width: 100%; padding: 14px 16px; font-size: 15px; white-space: normal; text-align: center; }

/* The people behind the giving. */
main .dstory { background: var(--navy-900); color: #fff; }
main .dstory .grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: center; }
main .dstory .story-photo { width: 100%; height: 470px; max-height: none; object-fit: cover; object-position: center; border-radius: 160px 160px 8px 8px; }
main .dstory .eyebrow { color: #f4ba60; }
main .dstory blockquote { margin: 24px 0 0; color: #fff; font: 400 clamp(28px, 3vw, 38px)/1.2 var(--serif); letter-spacing: -.015em; }
main .dstory .by { margin-top: 24px; font-size: 14px; color: #c5d5e1; }
main .dstory .by b { color: #fff; }
main .dstory .mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; border-top: 1px solid #ffffff30; margin-top: 34px; padding-top: 26px; }
main .dstory .mini b { display: block; font: 400 40px/1.1 var(--serif); color: #f4ba60; }
main .dstory .mini span { color: #c5d5e1; font-size: 13px; }
main .c3-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
main .c3-wall .card { display: flex; flex-direction: column; padding: 30px 28px; border: 1px solid var(--line); border-top: 3px solid #a4caba; border-radius: 4px 4px 12px 12px; background: #fff; color: var(--navy); }
main .c3-wall .card:nth-child(2) { border-top-color: var(--teal); }
main .c3-wall .card:nth-child(3) { border-top-color: var(--gold); }
main .c3-wall .card p { font: 400 24px/1.3 var(--serif); color: var(--navy); margin-bottom: 30px; }
main .c3-wall .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
main .c3-wall .avatar { background: var(--mint-200); color: var(--navy); }
main .c3-wall .who b { display: block; font-size: 14px; }
main .c3-wall .who span { color: var(--ink-soft); font-size: 13px; opacity: 1; }

/* A closing invitation, with space to breathe. */
main .c3-cta { background: var(--mint); text-align: center; border-top: 1px solid #c7dfd1; }
main .c3-cta h2 { font-size: clamp(38px, 4.5vw, 56px); font-weight: 400; max-width: 19ch; margin: 0 auto 20px; }
main .c3-cta p { font-size: 18px; color: var(--ink-soft); max-width: 48ch; margin: 0 auto 28px; }

  .c3-foot{ background:var(--navy-900); color:rgba(255,255,255,.7); padding:50px 0 34px; text-align:center; }
  .c3-foot .brandlock{ justify-content:center; } .c3-foot .brandlock .name{ color:#fff; }
  .c3-foot p{ font-size:14px; margin:16px auto 0; max-width:50ch; }
  .c3-foot .links{ display:flex; gap:24px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
  .c3-foot .links a{ font-size:14px; color:rgba(255,255,255,.7); } .c3-foot .links a:hover{ color:var(--gold); }


@media (max-width: 1000px) {
  main .dstory .grid { gap: 40px; grid-template-columns: 1fr 1.15fr; }
  main .gcircle { padding: 28px 22px; }
  main .c3-wall .card { padding: 26px 22px; }
}
@media (max-width: 760px) {
  main section.block { padding: 64px 0; }
  main .c3-hero .wrap { padding: 60px 24px 64px; }
  main .c3-hero h1 { font-size: clamp(44px, 8vw, 60px); }
  main .dnames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
  main .gcircles { grid-template-columns: 1fr; max-width: 480px; margin: auto; gap: 18px; }
  main .gcircle { padding: 30px; }
  main .gcircle .ring { margin-bottom: 20px; }
  main .dstory .grid { grid-template-columns: 1fr; gap: 36px; max-width: 560px; margin: auto; }
  main .dstory .story-photo { height: 380px; border-radius: 120px 120px 8px 8px; }
  main .c3-wall { grid-template-columns: 1fr; max-width: 560px; margin: auto; gap: 18px; }
  main .c3-wall .card { padding: 28px; }
  main .c3-wall .card p { margin-bottom: 24px; }
}
@media (max-width: 480px) {
  main section.block { padding: 52px 0; }
  main .c3-hero .wrap { padding: 48px 22px 54px; }
  main .c3-hero h1 { margin-top: 22px; }
  main .c3-hero p { font-size: 17px; line-height: 1.65; }
  main .c3-hero .row { gap: 12px; }
  main .c3-hero .row .btn { padding: 14px 20px; font-size: 15px; }
  main .sec-head { margin-bottom: 30px; }
  main .dwall .top { margin-bottom: 30px; }
  main .dtier, main .dtier:has(.gold) { padding: 32px 18px 26px; border-radius: 12px; }
  main .dtier::after { width: 160px; height: 160px; }
  main .dtier:has(.gold) .label { gap: 12px; margin-bottom: 24px; font-size: 24px; }
  main .dtier:has(.gold) .label::before,
  main .dtier:has(.gold) .label::after { flex-basis: 32px; }
  main .dnames.gold .n { font-size: 21px; }
  main .dnames.gold { gap: 22px 16px; }
  main .dnames.gold .n { flex-basis: calc(50% - 8px); }
  main .dnames .mark, main .dnames.champ .dlogos .mark { height: 96px; padding: 14px; }
  main .dnames.champ .dlogos .n { flex-basis: 100%; max-width: 300px; }
  main .dnames.champ .dpeople { flex-direction: column; align-items: center; gap: 10px; }
  main .dnames.champ .dpeople .n { font-size: 19px; }
  main .dnames.champ .n { font-size: 16px; }
  main .dnames.friend .n { font-size: 14px; }
  main .dstory .story-photo { height: 330px; }
  main .dstory .mini { gap: 12px; }
  main .dstory .mini b { font-size: 34px; }
}