@font-face {
  font-family: 'Petrona';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/petrona.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/archivo.woff2') format('woff2');
}

:root {
  --paper: #f3f4f5;
  --paper-2: #e7e9ea;
  --card: #ffffff;
  --graphite: #4a4e51;
  --graphite-2: #2c3033;
  --ink: #24272a;
  --ink-soft: #6b7075;
  --red: #d32100;
  --red-hi: #f2492a;
  --red-deep: #a81b08;
  --silver: #9d9c9d;
  --rule: rgba(36, 39, 42, 0.14);
  --rule-light: rgba(243, 244, 245, 0.2);

  --serif: 'Petrona', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --gut: clamp(20px, 5vw, 60px);
  --max: 1240px;
  --r: 6px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

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

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--graphite); color: var(--paper); padding: 12px 18px; z-index: 99; }
.skip:focus { left: 8px; top: 8px; }

.label {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ---------- masthead ---------- */

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(243, 244, 245, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.masthead-in {
  display: flex; align-items: center; gap: 24px;
  min-height: 96px; max-width: var(--max); margin: 0 auto;
  padding-inline: var(--gut);
}

.mark { display: flex; align-items: center; gap: 13px; text-decoration: none; margin-right: auto; min-width: 0; }
.mark img { height: 64px; width: auto; flex: none; }
.mark span {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft);
  padding-left: 13px; border-left: 1px solid var(--rule);
}
@media (max-width: 620px) {
  .mark img { height: 50px; }
  .mark span { display: none; }
}

.nav { display: flex; gap: 26px; align-items: center; }
.nav a {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-decoration: none; padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--red); }
@media (max-width: 880px) { .nav a.opt { display: none; } }

/* ---------- buttons ---------- */

.btn {
  display: inline-block; font-family: var(--sans);
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em;
  text-decoration: none; padding: 14px 24px; border-radius: var(--r);
  border: 1px solid var(--graphite); background: var(--graphite); color: #f6f7f8;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: var(--graphite-2); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--graphite); }
.btn.ghost:hover { background: var(--graphite); color: #f6f7f8; }
.btn.accent { background: var(--red); border-color: var(--red); color: #fff6f3; }
.btn.accent:hover { background: var(--red-hi); border-color: var(--red-hi); }

/* ---------- sign bar ---------- */

.signbar { border-top: 1px solid var(--rule); background: var(--paper-2); }
.signbar-in {
  max-width: var(--max); margin: 0 auto; padding: 9px var(--gut);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.signbar label {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft);
}
.signbar input {
  font-family: var(--serif); font-size: 16px; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: 4px;
  padding: 6px 11px; width: 190px; max-width: 45vw;
}
.signbar input:focus { outline: none; border-color: var(--red); }
.signbar-note { font-family: var(--sans); font-size: 11px; color: var(--ink-soft); }
@media (max-width: 560px) { .signbar-note { display: none; } }

/* ---------- lead ---------- */

.lead { padding-block: clamp(30px, 5vw, 56px) clamp(22px, 3vw, 34px); }
.lead h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 5.6vw, 60px); line-height: 1.02;
  letter-spacing: -0.028em; margin: 0 0 12px; color: var(--graphite);
}
.lead > .wrap > p { margin: 0 0 26px; max-width: 56ch; color: var(--ink-soft); font-size: 18px; }

.finder {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--rule); background: var(--card);
  border-radius: var(--r); padding: 0 14px; max-width: 560px;
  box-shadow: 0 10px 24px -22px rgba(36, 39, 42, 0.7);
}
.finder:focus-within { border-color: var(--red); }
.finder-icon { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; }
.finder input {
  flex: 1; background: transparent; border: 0; color: var(--ink);
  font-family: var(--serif); font-size: 19px; padding: 15px 0; min-width: 0;
}
.finder input::placeholder { color: rgba(107, 112, 117, 0.62); }
.finder input:focus { outline: none; }
.finder input::-webkit-search-cancel-button { display: none; }
.finder-clear {
  border: 0; background: transparent; color: var(--ink-soft);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 2px;
}

.count { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: 14px 0 0; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- directory ---------- */

.board { padding-bottom: clamp(50px, 7vw, 84px); }

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 22px; list-style: none; margin: 0; padding: 0;
}

.cell {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
  box-shadow: 0 14px 30px -26px rgba(36, 39, 42, 0.65);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.cell:hover { box-shadow: 0 20px 36px -26px rgba(36, 39, 42, 0.6); border-color: rgba(211, 33, 0, 0.4); }

.shot { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--paper-2); overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.cell:hover .shot img { transform: scale(1.04); }

.tag {
  position: absolute; left: 11px; bottom: 11px;
  background: rgba(36, 39, 42, 0.9); color: #f6f7f8;
  padding: 5px 10px; border-radius: 4px;
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
}

.cell-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.cell-name { text-decoration: none; display: block; }
/* The member is who you refer, so the person leads the card and the company
   sits underneath. Class names stay semantic: .who = person, .biz = company. */
.cell-name .who {
  display: block; font-family: var(--serif); font-weight: 600; font-size: 21px;
  line-height: 1.18; letter-spacing: -0.015em; color: var(--graphite);
}
.cell-name:hover .who { color: var(--red-deep); }
.cell-name .biz {
  display: block; font-family: var(--sans); font-weight: 400; font-size: 16px;
  color: var(--ink-soft); margin-top: 2px; letter-spacing: 0;
}

/* ---------- action buttons ---------- */

.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 15px; }

.act {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: var(--graphite); color: #fff;
  box-shadow: 0 1px 3px rgba(36, 39, 42, 0.2);
  transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
}
.act svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.act:hover, .act:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 5px 10px rgba(36, 39, 42, 0.26);
}
.act:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.t-sms  { background: #45a94a; }
.t-mail { background: var(--red); }
.t-x    { background: #101314; }
.t-fb   { background: #1877f2; }
.t-li   { background: #0a66c2; }
.t-link { background: var(--silver); }

.t-x svg { stroke-width: 2.5; }
.t-fb svg, .t-li svg { fill: currentColor; stroke: none; }

.act.ok { background: #2f8a35; }

.acts.big { gap: 11px; }
.acts.big .act { width: 44px; height: 44px; }
.acts.big .act svg { width: 21px; height: 21px; }

/* ---------- refer block on member page ---------- */

.refer {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 22px 24px 24px; margin-bottom: 40px;
  box-shadow: 0 14px 30px -26px rgba(36, 39, 42, 0.65);
}
.refer h2 { margin: 0 0 14px; color: var(--ink-soft); }
.refer .acts { margin-top: 0; padding-top: 0; }

.peek { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 14px; }
.peek summary {
  cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--red-deep); list-style: none;
}
.peek summary::-webkit-details-marker { display: none; }
.peek summary::before { content: '+ '; }
.peek[open] summary::before { content: '\2212 '; }
.peek pre {
  margin: 14px 0 0; white-space: pre-wrap; word-break: break-word;
  font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 16px 18px;
}

.no-hits { color: var(--ink-soft); padding: 28px 0; }

.vcf {
  display: inline-block; margin-top: 16px;
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--red-deep); text-decoration: none; border-bottom: 1px solid var(--rule);
}
.vcf:hover { border-bottom-color: var(--red-deep); }

/* ---------- member page ---------- */

.board { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); }

.board-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 34px; padding-bottom: 22px; border-bottom: 2px solid var(--graphite);
}
.board-head h2 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.02em; margin: 0; color: var(--graphite);
}
.board-head p { margin: 8px 0 0; color: var(--ink-soft); max-width: 46ch; font-size: 17px; }

.finder {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--rule); background: var(--card);
  border-radius: var(--r); padding: 0 16px; min-width: min(330px, 100%);
  max-width: 560px; margin-bottom: 4px;
}
.finder label { color: var(--ink-soft); white-space: nowrap; }

/* search filter hides non-matching cards — .cell sets display:flex, which
   overrides the UA [hidden]{display:none}, so restore it explicitly */
.cell[hidden] { display: none; }
.finder input {
  flex: 1; background: transparent; border: 0; color: var(--ink);
  font-family: var(--serif); font-size: 17px; padding: 14px 0; min-width: 0;
}
.finder input::placeholder { color: rgba(110, 97, 83, 0.65); }
.finder input:focus { outline: none; }
.finder:focus-within { border-color: var(--red); }

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
  gap: 26px; list-style: none; margin: 0; padding: 0;
}

/* the card */

.card-link {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
  box-shadow: 0 14px 30px -26px rgba(36, 39, 42, 0.65);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card-link:hover, .card-link:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 22px 38px -24px rgba(36, 39, 42, 0.55);
  border-color: rgba(211, 33, 0, 0.45);
}

.shot { position: relative; aspect-ratio: 16 / 9; background: var(--paper-2); overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card-link:hover .shot img { transform: scale(1.035); }

.tag {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(36, 39, 42, 0.9); color: #f6f7f8;
  padding: 6px 11px; border-radius: 4px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
}

.card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card-body .biz {
  font-family: var(--serif); font-weight: 600; font-size: 23px;
  line-height: 1.2; letter-spacing: -0.015em; color: var(--graphite);
}
.card-body .who { color: var(--ink-soft); font-size: 17px; }
.card-body .go {
  margin-top: auto; padding-top: 14px;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-deep);
}

.no-hits { color: var(--ink-soft); padding: 28px 0; }



.member { padding-block: clamp(32px, 5vw, 56px) clamp(48px, 7vw, 84px); }

.crumb { color: var(--ink-soft); margin-bottom: 26px; font-size: 16px; }
.crumb a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.crumb a:hover { border-bottom-color: var(--red); }

.banner {
  aspect-ratio: 21 / 8; overflow: hidden; border-radius: var(--r);
  border: 1px solid var(--rule); background: var(--paper-2); margin-bottom: 34px;
}
.banner img { width: 100%; height: 100%; object-fit: cover; }

.member-head { margin-bottom: 38px; }
.member-head .cat { color: var(--red-deep); margin: 0 0 12px; }
.member-head h1 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 5vw, 54px);
  line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 8px; color: var(--graphite);
}
.member-head .jobtitle {
  font-size: clamp(15px, 1.5vw, 17.5px); font-weight: 600; letter-spacing: .01em;
  color: var(--ink); margin: 0 0 8px; max-width: 46ch;
}
.member-head .who { font-size: clamp(21px, 2.5vw, 29px); color: var(--ink-soft); margin: 0; }

.member-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.member-body .prose p { margin: 0 0 20px; font-size: 20px; line-height: 1.66; }
.pending { border-left: 3px solid var(--red); padding: 4px 0 4px 18px; color: var(--ink-soft); }

.card-panel { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 26px; box-shadow: 0 14px 30px -26px rgba(36, 39, 42, 0.65); }
.card-panel h2 { margin: 0 0 18px; color: var(--ink-soft); font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.card-panel dl { margin: 0; font-size: 17px; }
.card-panel .row { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.card-panel .row:last-of-type { border-bottom: 0; }
.card-panel dt { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px; }
.card-panel dd { margin: 0; word-break: break-word; }
.card-panel dd a { text-decoration: none; border-bottom: 1px solid var(--red); }
.card-panel .btn { margin-top: 20px; width: 100%; text-align: center; }

@media (max-width: 820px) { .member-body { grid-template-columns: 1fr; } }

.pager {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: clamp(44px, 6vw, 72px); padding-top: 22px; border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.03em;
}
.pager a { text-decoration: none; max-width: 45%; }
.pager a:hover { color: var(--red-deep); }
.pager .to-right { text-align: right; margin-left: auto; }

/* ---------- flat pages ---------- */

.page { padding-block: clamp(40px, 6vw, 76px); }
.page h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(38px, 6vw, 68px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 22px; color: var(--graphite); }
.page .lede { font-size: 21px; max-width: 58ch; margin: 0 0 32px; }
.page h2 { font-family: var(--serif); font-weight: 600; font-size: 26px; letter-spacing: -0.015em; margin: 38px 0 12px; color: var(--graphite); }
.page p, .page li { max-width: 66ch; }
.page ul { padding-left: 20px; }
.page li { margin-bottom: 8px; }

main { flex: 1; }

/* ---------- footer ---------- */

.foot { background: var(--graphite-2); color: rgba(233, 235, 236, 0.72); padding-block: 34px 26px; margin-top: auto; }
.foot-in { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 30px; }
.foot-name { margin: 0; font-family: var(--serif); font-size: 17px; color: #e9ebec; }
.foot-links { margin: 0; display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--sans); font-size: 13px; font-weight: 600; }
.foot-links a { text-decoration: none; border-bottom: 1px solid transparent; }
.foot-links a:hover { color: var(--red-hi); border-bottom-color: var(--red-hi); }
.foot-base {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule-light);
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.04em; color: rgba(233, 235, 236, 0.5);
}

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

/* ---------- logo moved out of the header ---------- */
.topbar { background: var(--graphite-2); border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
.topbar-in {
  display: flex; justify-content: flex-end; align-items: center;
  min-height: 46px; max-width: var(--max); margin: 0 auto; padding: 7px var(--gut);
}
.topbar-login {
  font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
  color: #f6f7f8; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--r); padding: 8px 16px;
}
.topbar-login:hover { border-color: var(--red-hi); color: #fff; background: rgba(211, 33, 0, 0.18); }

.brandhero { padding: clamp(24px, 4vw, 44px) 0 0; }
.brand { display: inline-block; line-height: 0; }
.brand img { height: clamp(88px, 12vw, 124px); width: auto; }

/* logo now provides the top spacing, so trim the sections just below it */
.board { padding-top: clamp(16px, 2.4vw, 26px); }
.member { padding-top: clamp(16px, 2.4vw, 26px); }
.page { padding-top: clamp(18px, 3vw, 30px); }

/* ---- refer box sits to the right of the name ---- */
.member-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(24px, 4vw, 48px); flex-wrap: wrap; margin-bottom: 38px;
}
.member-top .member-head { margin-bottom: 0; flex: 1 1 320px; }
.member-top .refer { margin-bottom: 0; flex: 0 1 auto; align-self: flex-start; }

/* ---------- member page right column: logo on top, Refer joined to Contact ---------- */
.side { display: flex; flex-direction: column; gap: 22px; }

.side-logo {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 22px 24px; min-height: 118px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -26px rgba(36, 39, 42, 0.65);
}
/* contain — a logo is never cropped or stretched */
.side-logo img { max-width: 100%; max-height: 132px; width: auto; height: auto; object-fit: contain; display: block; }

/* one card holding both sections */
.side-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: 0 14px 30px -26px rgba(36, 39, 42, 0.65); overflow: hidden;
}
/* Refer sits at the top and drops its own standalone card styling */
.side-card .refer {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  margin: 0; padding: 22px 24px 20px;
}
.side-card .refer h2 { margin: 0 0 14px; color: var(--ink-soft); }
.side-card .refer .acts { margin-top: 0; padding-top: 0; }

/* Contact joined directly beneath, divided by a hairline */
.side-card .contact { padding: 21px 24px 24px; border-top: 1px solid var(--rule); }
.side-card .contact h2 {
  margin: 0 0 16px; color: var(--ink-soft); font-family: var(--sans);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
}
.side-card .contact dl { margin: 0; font-size: 17px; }
.side-card .contact .row { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.side-card .contact .row:last-of-type { border-bottom: 0; }
.side-card .contact dt {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px;
}
.side-card .contact dd { margin: 0; word-break: break-word; }
.side-card .contact dd a { text-decoration: none; border-bottom: 1px solid var(--red); }

/* Box titles ("Refer Danielle" / "Contact") sat at the same weight and colour
   as the field labels inside them (Address, Office, Email), so they read as
   peers rather than headings. Darker ink, a step larger, and a short accent
   rule underneath separate the title from its contents. */
.refer h2,
.side-card .refer h2,
.side-card .contact h2 {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase;
  margin: 0 0 14px; padding-bottom: 9px; position: relative;
}
.refer h2::after,
.side-card .refer h2::after,
.side-card .contact h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 26px; height: 2px; background: var(--red);
}
.side-card .contact h2 { margin-bottom: 15px; }

/* ---------- member page grid: right rail starts at the top ----------
   The name block sits in the left column and the side rail spans both rows,
   so with NO logo the Refer/Contact card rises to the top of the page rather
   than sitting low with empty space above it. With a logo, the logo takes
   that top spot and the card sits beneath it. */
.member-body {
  align-items: start; row-gap: 0;          /* the gap is a COLUMN gap; member-head's margin spaces the rows */
  grid-template-rows: min-content 1fr;      /* row 1 hugs the name; row 2 absorbs the tall side rail */
}
.member-body > .member-head { grid-column: 1; grid-row: 1; margin-bottom: clamp(22px, 3vw, 34px); }
.member-body > .prose { grid-column: 1; grid-row: 2; }
.member-body > .side { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 820px) {
  /* single column — everything falls back to source order */
  .member-body { grid-template-rows: none; }
  .member-body > .member-head,
  .member-body > .prose,
  .member-body > .side { grid-column: 1; grid-row: auto; }
}

/* ---------- public RSVP page ---------- */
.rsvp-wrap { padding: clamp(28px, 5vw, 60px) 0 70px; }
.rsvp-card { max-width: 560px; margin: 0 auto; background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r); padding: 30px 32px;
  box-shadow: 0 16px 40px -28px rgba(20,25,30,.5); }
.rsvp-card h1 { font-size: clamp(21px, 3vw, 27px); margin: 0 0 16px; }
.rsvp-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; }
.rsvp-facts dt { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft); padding-top: 3px; }
.rsvp-facts dd { margin: 0; font-size: 16px; }
.rsvp-note { background: var(--paper); border-radius: 8px; padding: 12px 14px; margin: 0 0 16px; }
.rsvp-ask { font-size: 17px; font-weight: 600; margin: 18px 0 12px; }
.rsvp-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 14px; }
.rsvp-b { font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; flex: 1 1 150px;
  padding: 13px 18px; border-radius: 8px; border: 1.5px solid var(--rule); background: #fff; color: var(--ink); }
.rsvp-b.yes { border-color: #a9d6bd; }
.rsvp-b.yes:hover, .rsvp-b.yes.on { background: #1f8a52; border-color: #1f8a52; color: #fff; }
.rsvp-b.maybe:hover, .rsvp-b.maybe.on { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.rsvp-b.no { border-color: #e6b3ab; }
.rsvp-b.no:hover, .rsvp-b.no.on { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.rsvp-card .muted { color: var(--ink-soft); }
.rsvp-card .small { font-size: 13px; }
.rsvp-card .ok { background: #e7f3ec; border: 1px solid #a9d6bd; color: #1f6b45;
  padding: 11px 14px; border-radius: 7px; margin: 0 0 10px; }
.rsvp-card .err { background: #fbeae8; border: 1px solid #e6b3ab; color: var(--red-deep);
  padding: 11px 14px; border-radius: 7px; }