/* /advisors, the recruiting hub. Family ADVISORS "Structure": the cool half of the light only (cyan #4FC3E8 to
   violet #9C7CF4), graphite lines, a technical grammar. Signature: THE LATTICE AS A MAP, an atlas plate (neatline,
   grid references, key, figure caption) with an index to the map and a schedule of routes.
   Static state = every bond lit (JS off, reduced motion, captures). JS may arm the map (.is-armed) to light the bonds
   one by one, then add .is-live for the inward pulse. Nothing here borrows a sibling's signature: no square drafting
   grid ground, no crop marks, no ruler, no tag chips, no superposition planes. */
:root {
  --c-cyan: #4FC3E8;
  --c-violet: #9C7CF4;
  --c-cyan-p: #7FD6F2;
  --c-violet-p: #B49CF8;
  --hair: rgba(29, 33, 38, .14);
  --hair-2: rgba(29, 33, 38, .26);
  --halo: rgba(246, 245, 241, .86);
}
main { position: relative; z-index: 1; }
.page-hub { background: var(--pearl); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================= the plate ================= */
.plate { position: relative; padding: 36px 0 64px; }
.plate::before {
  /* cool light only, held behind the map; it never reaches the copy */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vw 34vw at 70% 46%, rgba(127, 214, 242, .16), transparent 70%),
    radial-gradient(26vw 22vw at 66% 50%, rgba(180, 156, 248, .14), transparent 70%);
}
.plate-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 56px; align-items: center;
}

/* the title cartouche */
.cartouche { grid-column: 1; grid-row: 1; padding-bottom: 40px; }
.cartouche .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.eb-hex {
  width: 14px; height: 16px; flex: none;
  background: linear-gradient(150deg, var(--c-cyan), var(--c-violet));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  position: relative;
}
.eb-hex::after { content: ""; position: absolute; inset: 2px; background: var(--pearl); clip-path: inherit; }
.cartouche h1 {
  font: 400 clamp(52px, 5.3vw, 78px)/.95 var(--serif); letter-spacing: -.022em; margin: 0; text-wrap: balance;
}
.cartouche h1 .at { white-space: nowrap; }
.cartouche .lede { font-size: 18px; line-height: 1.62; color: var(--ink-2); margin: 28px 0 0; max-width: 30em; text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* the key, like a map's legend: inside the neatline on wide screens (bottom-left, where the lattice thins out),
   under the map on phones */
.key-h { font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.key-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.key-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.sw { width: 46px; height: 14px; flex: none; overflow: visible; }
.key-in {
  position: absolute; left: 2.6%; bottom: 2.6%; width: 40.5%; padding: 14px 16px 15px;
  background: rgba(251, 250, 247, .94); box-shadow: inset 0 0 0 1px var(--hair-2);
}
.key-out { display: none; }

/* ================= the map ================= */
.map { grid-column: 2; grid-row: 1; position: relative; margin: 0; padding: 26px 0 0 26px; }
.map-box { position: relative; aspect-ratio: 1 / 1; }
.map-svg, .map-pulse { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-pulse { pointer-events: none; will-change: transform; }

.neat-fill { fill: rgba(251, 250, 247, .55); }
.neat-out, .neat-in, .tick { fill: none; vector-effect: non-scaling-stroke; }
.neat-out { stroke: rgba(29, 33, 38, .5); stroke-width: 1px; }
.neat-in { stroke: rgba(29, 33, 38, .22); stroke-width: 1px; }
.tick { stroke: rgba(29, 33, 38, .4); stroke-width: 1px; }
.tick-major { stroke: rgba(29, 33, 38, .6); }

.cell { fill: url(#m-cell); stroke: rgba(29, 33, 38, .42); stroke-width: 1.4px; stroke-dasharray: 9 7; vector-effect: non-scaling-stroke; }
.net-edges path { fill: none; stroke: rgba(29, 33, 38, .16); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.net-pts circle { fill: rgba(29, 33, 38, .34); }

.core-glow { opacity: calc(.18 + var(--lit, 6) * .137); transition: opacity 1s var(--ease); }

.glows path { fill: none; stroke-width: 22; stroke-linecap: round; opacity: .55; transition: opacity .5s var(--ease); }
.b-light { fill: none; stroke-width: 5.5; stroke-linecap: round; transition: opacity .5s var(--ease), stroke-width .4s var(--ease); }
.b-pulse { fill: none; stroke-width: 11; stroke-linecap: round; opacity: 0; stroke-dasharray: 6 194; stroke-dashoffset: 7; }
.b-dash { fill: none; stroke: #5A6068; stroke-width: 2.6; stroke-dasharray: 10 9; transition: opacity .8s var(--ease); }

.mk-halo { opacity: .16; transition: opacity .5s var(--ease); }
.mk-ring { fill: #FBFAF7; stroke: var(--ink-2); stroke-width: 2.4; }
.mk-core { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease), opacity .5s var(--ease); }
.mk-out .mk-ring { stroke-width: 2.4; }

.tile-side { fill: url(#m-side); opacity: .9; }
.tile-face { fill: url(#m-face); stroke: url(#m-rim); stroke-width: 3; }
.tile-in { fill: none; stroke: rgba(29, 33, 38, .12); stroke-width: 1.2; }
.tile-sheen { fill: #fff; opacity: .7; }
.tile { filter: drop-shadow(0 14px 18px rgba(40, 60, 110, .18)); }

/* grid references in the margins */
.refs span { position: absolute; font: 600 11px/1 var(--sans); letter-spacing: .12em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.refs-x span { top: -20px; left: var(--p); transform: translateX(-50%); }
.refs-y span { left: -19px; top: var(--p); transform: translateY(-50%); }

/* the firm boundary's name, set along its top edge */
.b-name {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); margin: 0; white-space: nowrap;
  font: 600 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2);
  text-shadow: 0 0 2px var(--pearl), 0 0 5px var(--pearl), 0 0 9px var(--pearl);
}

/* site labels: real links, set beside each site with a halo, like a map */
.site {
  position: absolute; top: var(--y); transform: translateY(-50%);
  display: flex; flex-direction: column; justify-content: center; min-height: 44px; max-width: 24.5%;
  padding: 4px 6px; border-radius: 6px;
  text-decoration: none; color: var(--ink); transition: background .3s var(--ease), box-shadow .3s var(--ease);
  /* a cartographer's halo: the pearl ground knocked out around the letters, no box */
  text-shadow: 0 0 2px var(--pearl), 0 0 4px var(--pearl), 0 0 8px var(--pearl), 0 0 12px var(--pearl);
}
.site.r { left: var(--x); margin-left: 2.7%; align-items: flex-start; text-align: left; }
.site.l { right: calc(100% - var(--x)); margin-right: 2.7%; align-items: flex-end; text-align: right; }
.site.c {
  left: var(--x); transform: translate(-50%, -50%); max-width: 13%; min-width: 44px; align-items: center; text-align: center;
  background: none; padding: 0;
}
.s-ref { font: 600 10.5px/1 var(--sans); letter-spacing: .16em; color: var(--ink-3); margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.s-name { font: 400 clamp(15px, 1.42vw, 21px)/1.06 var(--serif); letter-spacing: -.003em; }
.site.c .s-name { font-size: clamp(13px, 1.45vw, 21px); line-height: 1; }
.site:hover, .site.is-focus { background: rgba(255, 255, 255, .95); box-shadow: inset 0 0 0 1px var(--hair-2), 0 8px 18px -12px rgba(40, 60, 110, .4); }
.site.c:hover, .site.c.is-focus { background: none; box-shadow: none; }
.site:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* hover or focus a site: its bond brightens, the others step back */
.map[data-focus] .bond:not(.is-focus), .map[data-focus] .glows path:not(.is-focus), .map[data-focus] .b-pulse:not(.is-focus) { opacity: .2; }
.map[data-focus] .bond.is-focus .b-light { stroke-width: 7.5; }
.map[data-focus] .mk:not(.is-focus) .mk-halo { opacity: .05; }
.map[data-focus] .mk.is-focus .mk-halo { opacity: .4; }
.map[data-focus="core"] .bond, .map[data-focus="core"] .glows path, .map[data-focus="core"] .b-pulse { opacity: 1; }

figcaption {
  margin: 18px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); max-width: 46em;
}
figcaption .fig { font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin-right: 8px; }

/* ---------- armed (JS, motion allowed, map in view at load): the bonds light one by one ---------- */
.map.is-armed .b-light, .map.is-armed .glows path { stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1s var(--ease), opacity .5s var(--ease), stroke-width .4s var(--ease); }
.map.is-armed .b-light.is-lit, .map.is-armed .bond.is-lit .b-light, .map.is-armed .glows path.is-lit { stroke-dashoffset: 0; }
.map.is-armed .mk:not(.is-lit) .mk-core { transform: scale(.2); opacity: 0; }
.map.is-armed .mk:not(.is-lit) .mk-halo { opacity: 0; }
.map.is-armed .bond-out:not(.is-lit) .b-dash { opacity: 0; }

/* ---------- live: a slow pulse runs inward along each bond (CSS only; paused off screen) ---------- */
.motion .map.is-live .b-pulse { opacity: .95; animation: pulse 4.6s linear infinite; animation-delay: calc(var(--i, 0) * -.77s); }
.motion .map.is-live.is-paused .b-pulse { animation-play-state: paused; }
@keyframes pulse { from { stroke-dashoffset: 7; } to { stroke-dashoffset: -193; } }

/* ================= index to the map ================= */
.index { position: relative; padding: 88px 0 48px; }
.index-head, .routes-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: end; margin-bottom: 40px; }
.index-head h2, .routes-head h2 { font: 400 clamp(40px, 4.4vw, 64px)/1 var(--serif); letter-spacing: -.015em; margin: 0; }
.index-head p, .routes-head p { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 32em; padding-bottom: 6px; }
.entries {
  columns: 2; column-gap: 72px; column-rule: 1px solid var(--hair);
  border-top: 2px solid var(--ink); padding-top: 6px;
}
.entry { break-inside: avoid; padding: 22px 0 24px; border-bottom: 1px solid var(--hair); scroll-margin-top: 96px; }
.e-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; font-weight: 400; }
.e-mk {
  position: relative; width: 14px; height: 14px; flex: none; align-self: center; border-radius: 50%;
  background: var(--pearl-2); box-shadow: inset 0 0 0 1.5px var(--ink-2);
}
.e-mk::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--hue, var(--c-cyan)); }
.entry.out .e-mk { border-radius: 1px; }
.entry.out .e-mk::after { border-radius: 0; background: var(--ink-3); }
.entry.core .e-mk { border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(150deg, var(--c-cyan), var(--c-violet)); box-shadow: none; }
.entry.core .e-mk::after { inset: 2px; background: var(--pearl-2); clip-path: inherit; border-radius: 0; }
.e-name { font: 400 clamp(26px, 2.3vw, 32px)/1.1 var(--serif); letter-spacing: -.01em; }
.e-lead { flex: 1; min-width: 24px; border-bottom: 1.5px dotted rgba(29, 33, 38, .38); transform: translateY(-6px); }
.e-ref { font: 600 13px/1 var(--sans); letter-spacing: .14em; color: var(--ink); font-variant-numeric: tabular-nums; }
.e-text { margin: 0 0 10px 26px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 34em; }
.e-src { margin: -6px 0 -10px 26px; font-size: 13.5px; color: var(--ink-3); }
.e-src a { color: var(--ink); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; }
.entry:target { background: linear-gradient(90deg, rgba(127, 214, 242, .14), transparent 70%); }

/* ================= four routes: a schedule ================= */
.routes { position: relative; padding: 88px 0 72px; }
.route-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.route {
  position: relative; display: grid; align-items: center; column-gap: 32px;
  grid-template-columns: 44px 96px minmax(0, 1fr) 248px;
  padding: 26px 24px 26px 0; border-bottom: 1px solid var(--hair-2);
  transition: background .35s var(--ease);
}
.route:hover, .route:focus-within { background: rgba(255, 255, 255, .62); }
.r-no { font: 600 13px/1 var(--sans); letter-spacing: .22em; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-left: 4px; }
.loc { width: 96px; height: 96px; display: block; overflow: visible; }
.loc-frame { fill: rgba(251, 250, 247, .7); stroke: rgba(29, 33, 38, .38); stroke-width: 1; }
.loc-cell { fill: rgba(127, 214, 242, .09); stroke: rgba(29, 33, 38, .34); stroke-width: 1; stroke-dasharray: 3 2.5; }
.loc-net { fill: none; stroke: rgba(29, 33, 38, .16); stroke-width: 1; }
.loc-pts circle { fill: #FBFAF7; stroke: var(--ink-2); stroke-width: 1.2; }
.loc-sq { fill: #FBFAF7; stroke: var(--ink-2); stroke-width: 1.2; }
#loc-tile { fill: #fff; stroke: url(#loc-g); stroke-width: 1.6; }
.loc-lit path { fill: none; stroke: url(#loc-g); stroke-width: 3; stroke-linecap: round; }
.loc-out { fill: none; stroke: #5A6068; stroke-width: 1.4; stroke-dasharray: 3 2.6; }
.loc-ring { fill: rgba(180, 156, 248, .16); stroke: url(#loc-g); stroke-width: 2.4; }
.loc-lit, .loc-ring { transition: opacity .35s var(--ease); }
.r-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); column-gap: 32px; align-items: center; }
.r-body h3 { font: 400 clamp(30px, 3vw, 44px)/1.04 var(--serif); letter-spacing: -.012em; margin: 0; }
.r-link { color: var(--ink); text-decoration: none; }
.r-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.r-link:focus-visible { outline: none; }
.route:focus-within { outline: 2px solid var(--ink); outline-offset: -2px; }
.r-body p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 30em; }
.r-go {
  justify-self: end; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: 600 15px/1 var(--sans); color: var(--ink); background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 0 0 1px rgba(29, 33, 38, .18), inset 0 1px 0 #fff;
  transition: transform .35s var(--ease), background .35s;
}
.r-go::after { content: "\2192"; font-weight: 500; }
.route:hover .r-go { transform: translateX(4px); background: #fff; }
.route.primary { background: linear-gradient(90deg, rgba(127, 214, 242, .10), rgba(180, 156, 248, .10)); }
.route.primary::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: linear-gradient(90deg, var(--c-cyan), var(--c-violet));
}
.route.primary .r-go { background: var(--ink); color: #FBFAF7; box-shadow: 0 10px 24px -12px rgba(29, 33, 38, .6); }
.route.primary:hover .r-go { background: var(--ink); }

/* ================= who you talk to ================= */
.talk { position: relative; padding: 64px 0 140px; }
.talk-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 72px; align-items: end; position: relative; padding-top: 56px; }
.talk-grid::before {
  /* one lit bond across the top, ending in a site: the last line on the map */
  content: ""; position: absolute; left: 0; right: 7px; top: 0; height: 2px;
  background: linear-gradient(90deg, rgba(29, 33, 38, .18), var(--c-cyan) 55%, var(--c-violet));
}
.talk-grid::after {
  content: ""; position: absolute; right: 0; top: -6px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--pearl-2); box-shadow: inset 0 0 0 1.5px var(--ink-2), inset 0 0 0 4px var(--pearl-2), inset 0 0 0 9px var(--c-violet), 0 0 16px rgba(180, 156, 248, .7);
}
.talk h2 { font: 400 clamp(48px, 6.2vw, 96px)/.95 var(--serif); letter-spacing: -.022em; margin: 0; max-width: 9.5em; }
.talk h2 .nb { white-space: nowrap; }
.talk-body p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 26em; }
.talk-body .cta-row { margin-top: 28px; }
.fineprint { margin-top: 28px !important; font-size: 13.5px !important; color: var(--ink-3) !important; line-height: 1.55 !important; }

/* ================= reduced motion: the lit, still map ================= */
@media (prefers-reduced-motion: reduce) {
  .b-pulse { display: none; }
  .map .b-light, .map .glows path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* ================= laptop and tablet ================= */
@media (max-width: 1180px) and (min-width: 761px) {
  .plate-grid { column-gap: 40px; grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr); }
  /* the map is too small here to hold its key inside the neatline: the key sits under the figure, in one row */
  .key-in { display: none; }
  .key-out { display: block; grid-column: 2; grid-row: 2; margin: 22px 0 0 26px; padding-top: 14px; border-top: 1px solid var(--hair-2); }
  .key-out .key-list { display: flex; flex-wrap: wrap; gap: 10px 26px; }
  .route { grid-template-columns: 36px 80px minmax(0, 1fr) 200px; column-gap: 24px; }
  .loc { width: 80px; height: 80px; }
  .r-body { grid-template-columns: 1fr; row-gap: 8px; }
  .r-go { padding: 0 18px; font-size: 14px; }
}
@media (max-width: 960px) and (min-width: 761px) {
  .plate-grid { grid-template-columns: 1fr; }
  .cartouche { grid-row: 1; padding-top: 24px; }
  .cartouche { padding-bottom: 0; }
  .map { grid-column: 1; grid-row: 2; max-width: 680px; margin-top: 48px; }
  .key-out { grid-column: 1; grid-row: 3; max-width: 654px; }
  .entries { column-gap: 48px; }
}

/* ================= phone ================= */
@media (max-width: 760px) {
  .plate { padding: 20px 0 40px; }
  .plate::before { background: radial-gradient(90vw 70vw at 60% 62%, rgba(127, 214, 242, .14), transparent 70%); }
  .plate-grid { grid-template-columns: minmax(0, 1fr); }
  .cartouche { grid-row: 1; padding-top: 18px; }
  .cartouche .eyebrow { margin-bottom: 18px; }
  .cartouche h1 { font-size: clamp(44px, 12.4vw, 60px); line-height: .95; }
  .cartouche .lede { font-size: 17px; margin-top: 22px; }
  .cta-row { margin-top: 26px; }
  .cta-row .btn { flex: 1 1 auto; }
  .cartouche { padding-bottom: 0; }
  .map { grid-column: 1; grid-row: 2; margin-top: 44px; padding: 20px 0 0 18px; }
  .key-in { display: none; }
  .key-out { display: block; grid-column: 1; grid-row: 3; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--hair-2); }
  .key-out .key-list li { font-size: 15px; }
  .refs span { font-size: 10px; }
  .refs-x span { top: -16px; }
  .refs-y span { left: -14px; }
  .b-name { font-size: 8.5px; letter-spacing: .18em; top: 9.6%; }
  .site { padding: 3px 4px; max-width: 26%; min-height: 44px; }
  .site.r { margin-left: 2.2%; }
  .site.l { margin-right: 2.2%; }
  .s-ref { font-size: 9px; letter-spacing: .12em; margin-bottom: 3px; }
  .s-name { font-size: 13.5px; line-height: 1.05; }
  .site.c .s-name { font-size: 12px; }
  /* the top site's reference would sit on the firm boundary at this size: set it under the name instead */
  .site[data-k="fp"] { flex-direction: column-reverse; }
  .site[data-k="fp"] .s-ref { margin: 3px 0 0; }
  .glows path { stroke-width: 24; opacity: .45; }
  .b-light { stroke-width: 7; }
  .b-pulse { stroke-width: 15; }
  .b-dash { stroke-width: 4; }
  .mk-ring { stroke-width: 3.4; }
  figcaption { font-size: 13px; }

  .index { padding: 64px 0 32px; }
  .index-head, .routes-head { grid-template-columns: 1fr; row-gap: 14px; margin-bottom: 28px; }
  .index-head p, .routes-head p { font-size: 16px; }
  .entries { columns: 1; }
  .entry { padding: 18px 0 20px; }
  .e-name { font-size: 26px; }
  .e-text { margin-left: 26px; font-size: 16px; }

  .routes { padding: 64px 0 48px; }
  .route { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; row-gap: 14px; padding: 22px 0; align-items: start; }
  .r-no { display: none; }
  .loc { width: 64px; height: 64px; grid-row: 1 / span 2; }
  .r-body { grid-template-columns: 1fr; row-gap: 8px; }
  .r-body h3 { font-size: 30px; }
  .r-body p { font-size: 16px; }
  .r-go { grid-column: 2; justify-self: start; min-height: 44px; padding: 0 18px; font-size: 14px; }
  .route:focus-within { outline-offset: 2px; }

  .talk { padding: 40px 0 96px; }
  .talk-grid { grid-template-columns: 1fr; row-gap: 26px; padding-top: 44px; }
  .talk h2 { font-size: clamp(42px, 11.6vw, 56px); }
  .talk-body p { font-size: 17px; }
}