/* /advisors/investment-management. Family ADVISORS "Structure": this file is a thin page layer over the family
   stylesheet /advisors/join/assets/join.css (hero, drafting ground, timeline, spec sheet, the stacked-edge solid, the
   join band). It adds only what this page needs: the CTA row, section heads, the service column on the spec sheet,
   the investment policy outline, the method cells, the risk ledger, the outside-manager steps and related links.
   No script on this page; join.js is not loaded, so every timeline node shows lit (the family's static state). */
.page-im { background: var(--pearl); }

/* ---------- hero additions ---------- */
.page-im .hero { padding-bottom: 8px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0 calc(clamp(60px, 9.2vw, 150px) * 1.04); }
.im-solid { grid-column: 9 / -1; grid-row: 1; align-self: end; justify-self: end; margin: 0 32px 40px 0; z-index: 1; }

/* ---------- section heads (shared by every section below) ---------- */
.sec { position: relative; z-index: 2; padding: 112px 0 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: end; margin-bottom: 40px; }
.sec-head h2 { font: 400 clamp(40px, 4.4vw, 64px)/1 var(--serif); letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.sec-head p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.6; max-width: 34em; padding-bottom: 6px; }
.src { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); margin: 20px 0 0; }
.src a, .ledger a, .rel a, .band-body a:not(.btn) { color: var(--ink); text-underline-offset: 3px; }
.src a { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; }

/* ---------- what your clients get: the spec sheet with a description column ---------- */
.page-im .spec { padding: 72px 0 0; }
.svc-d {
  margin: 0; padding: 26px 40px 26px 32px; border-left: 1px solid var(--hair); align-self: stretch;
  display: flex; align-items: center; font-size: 16.5px; line-height: 1.6; color: var(--ink-2);
}
.page-im .q { font-size: clamp(24px, 2.2vw, 31px); }
.sheet-foot { margin: 0; padding: 16px 56px 18px 120px; font-size: 13.5px; color: var(--ink-3); border-bottom: 1px solid var(--hair); }
.sheet-foot a { color: var(--ink); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; }

/* ---------- how a portfolio comes together: timeline left, the policy outline right ---------- */
.build-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: start; }
.page-im .timeline { grid-column: 1; grid-row: 1; padding: 0; }
.page-im .timeline h2 { margin-bottom: 56px; }
.page-im .step { min-height: 0; padding-bottom: 60px; }
.page-im .step-last { padding-bottom: 0; }
.page-im .step h3 { font-size: clamp(30px, 2.8vw, 42px); max-width: 14em; }
.page-im .step p { font-size: 17px; max-width: 30em; }
.ips { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--head) + 32px); margin: 132px 0 0; }
.ips-sheet {
  position: relative; padding: 30px 30px 26px;
  background:
    linear-gradient(var(--grid-1) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, var(--grid-1) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(251, 250, 247, .94));
  box-shadow: inset 0 0 0 1px rgba(29, 33, 38, .32), 0 40px 80px -60px rgba(40, 60, 110, .35);
}
.ips-sheet::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--c-cyan), var(--c-violet) 60%, transparent); }
.ips-h { font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px; }
.ips-t { font: 400 30px/1.05 var(--serif); letter-spacing: -.01em; margin: 0 0 20px; }
.ips-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair-2); }
.ips-rows li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); align-items: end; gap: 16px; padding: 18px 0 12px; border-bottom: 1px solid var(--hair); font-size: 15px; color: var(--ink-2); }
.ips-rows i { display: block; border-bottom: 1px dashed rgba(29, 33, 38, .34); margin-bottom: 6px; }
.ips-out { margin: 22px 0 0; display: flex; align-items: center; gap: 14px; font: 400 22px/1.2 var(--serif); color: var(--ink); }
.ips-out::before { content: ""; flex: none; width: 34px; height: 2px; background: linear-gradient(90deg, var(--c-cyan), var(--c-violet)); }
.ips figcaption { margin: 16px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
.fig { font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin-right: 8px; }

/* ---------- how the firm analyzes and invests: cells on a ruled grid ---------- */
.cells {
  /* hairlines drawn by the 1px gap over a ruled ground, so a wide cell never leaves a stray border */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--hair-2); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--hair-2);
}
.cell { padding: 26px 30px 30px; background: var(--pearl); }
.cell-k { font: 600 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.cell h3 { font: 400 clamp(26px, 2.2vw, 32px)/1.08 var(--serif); letter-spacing: -.01em; margin: 0 0 12px; }
.cell p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.cell-wide { grid-column: span 2; }
.types { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.types li {
  font: 500 14px/1 var(--sans); color: var(--ink); padding: 10px 12px; border-radius: 4px;
  background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--hair-2);
}

/* ---------- risk, stated plainly: one statement, then the ledger ---------- */
.risk-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; }
.risk-lead { position: relative; margin: 0; padding: 28px 0 0; border-top: 2px solid var(--ink); font: 400 clamp(28px, 2.6vw, 38px)/1.18 var(--serif); letter-spacing: -.01em; }
.risk-lead span { display: block; margin-top: 18px; font: 400 17px/1.6 var(--sans); color: var(--ink-2); }
.ledger { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ledger li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); column-gap: 28px; padding: 20px 0 22px; border-bottom: 1px solid var(--hair-2); }
.ledger h3, .ledger .l-k { font: 400 clamp(22px, 1.9vw, 27px)/1.15 var(--serif); letter-spacing: -.005em; margin: 0; }
.ledger p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.ledger p + p { margin-top: 10px; }
.ledger .l-src { font-size: 13.5px; color: var(--ink-3); }

/* ---------- selection of other advisers: four steps, then fees and limits ---------- */
.om-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: start; }
.om-steps { list-style: none; margin: 0; padding: 0; counter-reset: om; border-top: 2px solid var(--ink); }
.om-steps li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; padding: 22px 0 24px; border-bottom: 1px solid var(--hair-2); }
.om-n { font: 600 13px/1 var(--sans); letter-spacing: .22em; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 10px; }
.om-steps h3 { font: 400 clamp(24px, 2.1vw, 30px)/1.1 var(--serif); margin: 0 0 8px; }
.om-steps p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.om-note { position: relative; padding: 28px 30px 26px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--hair-2); }
.om-note + .om-note { margin-top: 20px; }
.om-note::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--c-cyan), var(--c-violet) 60%, transparent); }
.om-note h3 { font: 600 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; }
.om-note p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.om-note p + p { margin-top: 10px; }

/* ---------- the join band (family .join grammar, with copy and buttons where the form sits) ---------- */
.page-im .join { padding: 120px 0 64px; }
.band-body { padding-top: 12px; }
.band-body > p:not(.fineprint) { margin: 0; font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 30em; }
.band-body .cta-row { margin: 30px 0 0; }
.band-body .fineprint { margin-top: 26px; }

/* ---------- related pages ---------- */
.rel { position: relative; z-index: 2; padding: 24px 0 140px; }
.rel h2 { font: 600 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.rel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair-2); }
.rel li { border-bottom: 1px solid var(--hair); }
.rel a { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 88px; padding: 14px 18px 14px 0; text-decoration: none; }
.rel a:hover .rel-n, .rel a:focus-visible .rel-n { text-decoration: underline; text-underline-offset: 4px; }
.rel-n { font: 400 24px/1.1 var(--serif); color: var(--ink); }
.rel-n::after { content: " \2192"; font: 500 16px/1 var(--sans); }
.rel-d { font-size: 14px; line-height: 1.45; color: var(--ink-3); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) and (min-width: 761px) {
  .im-solid { display: none; }
  .page-im .spec-list li { grid-template-columns: 88px minmax(0, .9fr) minmax(0, 1.1fr); }
  .sheet-foot { padding-left: 88px; }
  .build-grid, .om-grid { column-gap: 40px; }
  .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell-wide { grid-column: span 2; }
  .ledger li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .rel ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .cta-row { margin: 26px 0 0; }
  .cta-row .btn { flex: 1 1 auto; }
  .im-solid { display: none; }
  .sec { padding-top: 72px; }
  .sec-head { grid-template-columns: minmax(0, 1fr); row-gap: 14px; margin-bottom: 28px; }
  .sec-head p { font-size: 16px; }
  .page-im .spec { padding-top: 48px; }
  .page-im .spec-list li { grid-template-columns: 52px minmax(0, 1fr); }
  .page-im .q { padding: 22px 18px 6px; font-size: 24px; }
  .svc-d { grid-column: 2; border-left: 0; padding: 0 18px 22px; font-size: 16px; }
  .sheet-foot { padding: 14px 20px 16px; }
  .build-grid, .risk-grid, .om-grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .page-im .step { padding-bottom: 44px; }
  .page-im .step h3 { font-size: 30px; padding-right: 56px; }
  .ips { position: relative; top: auto; margin: 0; }
  .ips-sheet { padding: 24px 20px 22px; }
  .ips-rows li { grid-template-columns: 7.5em minmax(0, 1fr); }
  .cells { grid-template-columns: minmax(0, 1fr); }
  .cell { padding: 22px 18px 24px; }
  .ips { grid-column: 1; grid-row: auto; }
  .page-im .timeline { grid-row: auto; }
  .cell-wide { grid-column: auto; }
  .ledger li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .om-steps li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
  .om-note { padding: 24px 20px 22px; }
  .page-im .join { padding: 80px 0 40px; }
  .band-body > p:not(.fineprint) { font-size: 17px; }
  .rel { padding-bottom: 96px; }
  .rel ul { grid-template-columns: minmax(0, 1fr); }
  .rel a { min-height: 72px; }
}