/* About page */

.dgrid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .dgrid { grid-template-columns: repeat(3, 1fr); } }
.dcard { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: .6rem; align-content: start; height: 100%; padding: clamp(1.5rem, 2.4vw, 2.2rem); border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: border-color .5s, transform .6s var(--ease-expo); }
.dcard.card--ink { background: linear-gradient(160deg, var(--black-2), var(--black) 70%); border-color: rgba(200, 165, 91, .3); box-shadow: 0 18px 44px -24px rgba(0, 0, 0, .7); }
.dcard::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(24rem circle at var(--mx, 50%) var(--my, 50%), rgba(184, 145, 63, .14), transparent 45%); }
.dcard:hover, .dcard:focus-visible { border-color: rgba(184, 145, 63, .5); transform: translateY(-4px); }
.dcard:hover::after, .dcard:focus-visible::after { opacity: 1; }
.dcard__glyph { width: 6.5rem; height: 6.5rem; color: var(--gold); margin-bottom: .6rem; }
.dcard__num { font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--gold); }
.dcard__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); line-height: 1.12; }
.dcard__text { color: var(--muted); }
.dcard__go { display: inline-flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .9rem; font-weight: 600; color: var(--gold-2); }
.dcard__go svg { width: 1rem; height: 1rem; transition: transform .5s var(--ease-expo); }
.dcard:hover .dcard__go svg { transform: translateX(4px); }

.reach { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .reach { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 6vw, 6rem); } }
.reach__copy { display: grid; gap: 1.3rem; justify-items: start; }
.reach__list { display: grid; width: 100%; max-width: 40rem; margin-top: .6rem; border-top: 1px solid var(--line-strong); }
.reach__list li { display: grid; gap: .15rem 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--line); color: var(--muted); }
@media (min-width: 600px) { .reach__list li { grid-template-columns: 13rem 1fr; align-items: baseline; } }
.reach__k { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold-2); }
.reach__art { position: relative; width: min(100%, 26rem); aspect-ratio: 1; justify-self: center; color: var(--gold-2); padding: 1.25rem; border-radius: 50%; background: rgba(20, 19, 16, .62); border: 1px solid rgba(200, 165, 91, .35); box-shadow: 0 18px 44px -24px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.reach__svg { width: 100%; height: 100%; }
.about-approach__photo { margin-top: 1.5rem; }
@media (max-width: 899px) { .about-approach__photo { max-width: 32rem; } }
.reach__tag { position: absolute; background: var(--black); padding: .25rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .06em; white-space: nowrap; box-shadow: var(--shadow-sm); border: 1px solid rgba(184, 145, 63, .45); color: var(--gold-2); }
.reach__tag--a { left: 50%; top: 56%; transform: translateX(-50%); }
.reach__tag--b { left: 50%; top: 11%; transform: translateX(-50%); }
.reach__tag--c { right: 0; bottom: 10%; }

/* Mobile: 2x2 discipline cards, compact reach block */
@media (max-width: 699px) {
  .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .dgrid > li:last-child { grid-column: 1 / -1; }
  .dgrid > li:last-child .dcard { min-height: 0; }
  .dcard { padding: 1rem .9rem; gap: .35rem; border-radius: 1rem; }
  .dcard__glyph { display: none; }
  .dcard__title { font-size: 1.1rem; }
  .dcard__text { font-size: .84rem; line-height: 1.45; }
  .dcard__go { font-size: .82rem; margin-top: .3rem; min-height: 2.75rem; align-items: center; }
  .reach { gap: 1.75rem; }
  .reach__copy { gap: .9rem; }
  .reach__list li { padding-block: .7rem; }
  .reach__art { width: min(100%, 14rem); }
  .about-approach__photo { margin-top: 1rem; }
}

/* .vcard (defined later in style.css) beats .vcard--ink on source order, so restate the black fill here */
.vcard.vcard--ink { background: linear-gradient(160deg, var(--black-2), var(--black) 70%); border-color: rgba(200, 165, 91, .3); box-shadow: 0 18px 44px -24px rgba(0, 0, 0, .7); }