/* Brokerage (Figma D04 648:526 · T04 672:1678 · M04 673:76149) */

/* ---------- shared page bits (same in about/services css) ---------- */
.page-title { font-size: 40px; }
@media (min-width: 768px) { .page-title { font-size: 42px; } }
@media (min-width: 1200px) { .page-title { font-size: 71.5px; } }
@media (max-width: 767px) { main .t-h2 { font-size: 28px; } }
.crumb { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.split-head { display: grid; gap: 10px; margin-bottom: 40px; }
@media (min-width: 768px) { .split-head { grid-template-columns: 264px 1fr; align-items: baseline; gap: 24px; margin-bottom: 40px; } }
@media (min-width: 1200px) { .split-head { grid-template-columns: 1fr 440px; } }
.art { width: 100%; height: auto; overflow: visible; }
.art text { font-family: var(--mono); font-weight: 500; }
.art .m { font-size: 11px; letter-spacing: .05em; }
.art .mm { font-size: 12px; letter-spacing: .05em; }

/* ---------- intro ---------- */
.intro { padding: 40px 0 40px; }
.intro-row { display: grid; gap: 36px; }
.intro-text { display: grid; justify-items: start; min-width: 0; }
.intro-text .crumb { margin-bottom: 36px; }
.intro-text .page-title { line-height: 1.04; }
.intro-text .t-body { margin-top: 16px; }
.intro-text .btns { margin-top: 28px; }
.person { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; border-top: 1px solid var(--k600); padding-top: 20px; }
.person .photo { aspect-ratio: 4 / 5; }
.person .name { margin: 8px 0 4px; }
@media (max-width: 767px) { .intro-text .t-body { font-size: 15px; line-height: 1.5; } }
@media (min-width: 768px) {
  .intro { padding: 72px 0 80px; }
  .intro-row { grid-template-columns: 1fr 240px; gap: 32px; align-items: end; }
  .intro-text .crumb { margin-bottom: 52px; }
  .intro-text .t-body { margin-top: 24px; }
  .intro-text .btns { margin-top: 40px; }
  .person { display: block; border: 0; padding: 0; }
  .person .photo { aspect-ratio: auto; height: 300px; margin-bottom: 20px; }
  .person .name { margin: 6px 0 4px; }
}
@media (min-width: 1200px) { .intro { padding: 72px 0 96px; } }

.wide { height: 280px; }
.wide figcaption { left: var(--margin); }
@media (min-width: 768px) { .wide { height: 440px; } .wide figcaption { bottom: 28px; } }
@media (min-width: 1200px) { .wide { height: 600px; } .wide figcaption { bottom: 24px; } }

/* ---------- stats ---------- */
.br-stats { grid-template-columns: repeat(2, 1fr); }
.br-stats .stat { min-height: 140px; }
@media (max-width: 767px) { .br-stats .t-text { font-size: 13px; } }
@media (min-width: 768px) { .br-stats .stat { min-height: 189px; } }
@media (min-width: 1200px) { .br-stats { grid-template-columns: repeat(4, 1fr); } .br-stats .stat { min-height: 219px; } }

/* ---------- instruments ---------- */
.inst { position: relative; display: grid; grid-template-columns: 24px 1fr auto; gap: 4px 16px; align-items: start; padding: 20px 0; color: var(--black); }
.inst .icon { color: var(--g700); grid-row: 1; grid-column: 1; margin-top: 2px; }
.inst .k { grid-row: 1; grid-column: 3; text-align: right; }
.inst > div { grid-row: 1; grid-column: 2; }
.inst .t-h3 { margin-bottom: 4px; }
@media (max-width: 767px) {
  .inst-grid { border: 0; border-top: 1px solid var(--k600); }
  .inst-grid > .inst { border-right: 0; }
  .inst .t-text { font-size: 13px; }
}
@media (min-width: 768px) {
  .inst { display: flex; flex-direction: column; justify-content: space-between; min-height: 239px; padding: 24px; }
  .inst .k { position: absolute; right: 24px; top: 26px; }
  .inst .icon { margin: 0; }
}

/* ---------- fees ---------- */
.fe-head { display: grid; gap: 20px; justify-items: start; margin-bottom: 32px; }
.fe-head .t-text { margin-top: 10px; }
@media (min-width: 768px) { .fe-head { grid-template-columns: 1fr auto; align-items: end; margin-bottom: 40px; } .fe-head .t-text { margin-top: 16px; } }
.fees th { color: var(--k500); font-size: 11px; padding-bottom: 12px; white-space: normal; vertical-align: bottom; }
.fees td { padding-block: 18px; }
.fees td.serif { padding-right: 24px; }
.fees td.mk { color: var(--k600); }
@media (min-width: 1200px) {
  .fees th:nth-child(1) { width: 360px; } .fees th:nth-child(2) { width: 320px; }
  .fees th:nth-child(3), .fees th:nth-child(4) { width: 200px; }
  .fees td { padding-block: 19px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .fees th:nth-child(1) { width: 178px; } .fees th:nth-child(2) { width: 158px; }
  .fees th:nth-child(3) { width: 116px; } .fees th:nth-child(4) { width: 108px; }
  .fees td.serif { padding-right: 12px; }
}
@media (max-width: 767px) {
  .fees, .fees thead, .fees tbody { display: block; }
  .fees thead tr, .fees tbody tr { display: grid; grid-template-columns: repeat(3, 1fr); }
  .fees thead tr { border-bottom: 1px solid var(--black); }
  .fees th { border: 0; padding: 0 8px 10px 0; }
  .fees th:nth-child(1), .fees th:nth-child(2) { display: none; }
  .fees tbody tr { padding: 14px 0 16px; border-bottom: 1px solid var(--line); row-gap: 2px; }
  .fees td { border: 0; padding: 0 8px 0 0; }
  .fees td.serif, .fees td.mk { grid-column: 1 / -1; }
  .fees td.mk { font-size: 11px; color: var(--k500); margin-bottom: 12px; }
}

/* ---------- steps ---------- */
.steps-art { margin-bottom: 28px; }
@media (max-width: 767px) { .steps-art { display: none; } }
.steps { display: grid; gap: 24px; }
.steps .t-h3 { margin-bottom: 4px; }
.steps .st-n, .steps .st-d, .steps .st-end { display: none; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 8px; } .steps .t-h3 { padding-right: 16px; } }
@media (min-width: 1200px) { .steps { gap: 24px; } }
@media (max-width: 767px) {
  .steps { gap: 0; }
  .steps li { position: relative; padding: 0 0 46px 70px; min-height: 124px; }
  .steps .st-n { display: grid; place-items: center; position: absolute; left: 0; top: 0; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--g700); background: var(--k100); color: var(--g700); }
  .steps li:nth-child(3) .st-n { background: var(--white); }
  .steps li:not(.st-end)::after { content: ""; position: absolute; left: 25.5px; top: 60px; bottom: 6px; border-left: 1.5px solid var(--g700); }
  .steps li:not(.st-end)::before { content: ""; position: absolute; left: 22px; bottom: 6px; width: 7px; height: 7px; border-right: 1.5px solid var(--g700); border-bottom: 1.5px solid var(--g700); transform: rotate(45deg); }
  .steps .st-d { display: block; margin-bottom: 4px; }
  .steps li:nth-child(3) { padding-bottom: 40px; min-height: 0; }
  .steps .st-end { display: flex; align-items: center; min-height: 0; padding: 0 0 0 70px; }
  .steps .st-end::before { content: ""; position: absolute; left: 20px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--black); }
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 24px; }
@media (max-width: 767px) { .faq-list { border-top: 1px solid var(--k600); } }
.faq .acc summary { padding-block: 20px; align-items: flex-start; }
.faq .acc summary .icon { margin-top: 2px; }
.faq .acc .i-minus, .faq .acc[open] .i-plus { display: none; }
.faq .acc[open] .i-minus { display: block; }
.faq .acc[open] summary .icon { transform: none; }
.faq .acc .answer { margin-top: -8px; }
@media (max-width: 767px) { .faq .q { font-size: 16px; line-height: 1.6; } }
@media (min-width: 768px) { .faq .acc summary { padding-block: 24px; } }
@media (min-width: 1200px) {
  .faq { grid-template-columns: 440px 1fr; gap: 0; align-items: start; }
  .faq-list { border-top: 0; }
  .faq .acc:first-child summary { padding-top: 4px; }
}

/* ---------- phase 3: motion, hover, focus ---------- */
/* steps flow: shorter line draw, calmer pops */
.steps-art.draw [data-draw] { transition-duration: .7s; }
.steps-art.draw circle[data-pop] { transform: scale(.6); }
.steps-art.draw text[data-pop] { transform: translateY(4px); }
.steps-art.draw.is-in [data-pop] { transform: none; }
/* mobile steps: connector line grows down after each step enters */
@media (max-width: 767px) {
  .steps li:not(.st-end)::after { transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease); transition-delay: calc(var(--d, 0s) + .35s); }
  .steps li:not(.st-end)::before { opacity: 0; transition: opacity .3s ease; transition-delay: calc(var(--d, 0s) + .9s); }
  .steps.is-in li::after { transform: none; }
  .steps.is-in li::before { opacity: 1; }
}
/* instrument cells and fee rows: quiet hover */
.inst { transition: background .25s ease; }
.inst .icon { transition: transform .4s var(--ease); }
.inst:hover { background: var(--k50); }
.inst:hover .icon { transform: translateY(-2px); }
.fees tbody tr { transition: background .15s; }
.fees tbody tr:hover { background: var(--k50); }
/* contact card */
.person .photo img { transition: transform 1.2s var(--ease), filter .6s ease; }
.person:hover .photo img { transform: scale(1.03); filter: contrast(1.06); }
/* FAQ: hover, focus, open */
.faq .acc summary { transition: color .2s; }
.faq .acc summary:hover, .faq .acc summary:focus-visible { color: var(--g700); }
.faq .acc summary:focus-visible { outline-offset: 4px; }
.faq .acc[open] .answer { animation: acc-in .45s var(--ease); }
@keyframes acc-in { from { opacity: 0; transform: translateY(-6px); } }
/* full-bleed photo: cap height on very wide screens */
@media (min-width: 1600px) { .wide { height: min(720px, 37.5vw); } }
@media (prefers-reduced-motion: reduce) {
  .steps li::after, .steps li::before { transform: none !important; opacity: 1 !important; transition: none !important; }
  .faq .acc[open] .answer { animation: none; }
}
/* long single word in the title: scale down on narrow phones so it never overflows */
@media (max-width: 767px) { .page-title { font-size: min(40px, calc((100vw - 2 * var(--margin)) / 8.8)); } }
/* caption aligns with the centred content on wide screens */
@media (min-width: 1200px) { .wide figcaption { left: max(var(--margin), calc((100% - 1280px) / 2)); } }
/* narrow phones: keep each stat number on one line */
@media (max-width: 767px) { .br-stats .t-num { white-space: nowrap; font-size: clamp(24px, 8.4vw, 32px); } }