/* ---------- What we do: shared pieces ---------- */
.typemark--nri { color: #6fa8dc; }
.typemark--unlisted { color: #c99a5b; }
.typemark--bonds { color: #7fb7a4; }
:root[data-theme="light"] .typemark--nri { color: #2f6aa3; }
:root[data-theme="light"] .typemark--unlisted { color: #8a5a1f; }
:root[data-theme="light"] .typemark--bonds { color: #2c7a63; }
#services ul:not(.promises) { display: grid; gap: 8px; font-size: var(--t-sm); }
#services ul:not(.promises) li { display: flex; gap: 10px; }
#services ul:not(.promises) li::before { content: "\2726"; color: var(--accent-strong); font-size: 10px; line-height: 2.1; flex: none; }
.wwd__link { justify-self: start; font-weight: 600; font-size: var(--t-sm); color: var(--accent); text-decoration: none; }
.wwd__link::after { content: " \2192"; }
.viz { width: 100%; max-width: 360px; justify-self: center; display: grid; gap: 14px; padding: 24px; border-radius: 22px; color: #f4f1ea;
  background: radial-gradient(120% 140% at 85% 10%, #16234f 0%, #0b1430 60%); border: 1px solid rgba(212,166,94,.28); box-shadow: var(--shadow-3); }
.viz__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #d4a65e; }
.viz__foot { font-size: var(--t-xs); color: #8a92ad; }
.nri { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.nri > div { display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(212,166,94,.18); }
.nri b { font-family: var(--font-display); font-size: 1.25rem; color: #f4f1ea; }
.nri span { font-size: 12px; color: #b3b9cf; }
.nri i { font-style: normal; color: #d4a65e; font-size: 20px; }
.ul { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 0; border-top: 1px solid rgba(212,166,94,.16); }
.ul b { font-weight: 600; font-size: var(--t-sm); }
.ul em { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #d4a65e; align-self: center; }
.ul span { grid-column: 1 / -1; font-size: 12px; color: #8a92ad; }
.curve { width: 100%; height: auto; }
.curve .ax { stroke: rgba(212,166,94,.25); stroke-width: 1; fill: none; }
.curve .ln { stroke: #e6c48a; stroke-width: 2; fill: none; }
.curve .pt circle { fill: #0b1430; stroke: #e6c48a; stroke-width: 1.5; }
.curve .lb text { fill: #8a92ad; font-family: var(--font-mono); font-size: 10px; }

/* ---------- Option A: the constellation ---------- */
.wwd-a { padding-block: 104px; }
.wwd-a .section__head h2, .wwd-a .section__head .lede { color: var(--plate-ink); }
.wwd-a .section__head .lede { color: var(--plate-ink-2); }
.wwd-a .section__head h2 em { color: var(--gold-300); }
.wwd-a .eyebrow { color: var(--plate-gold); }
.sky { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .sky { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; } }
.sky__map { position: relative; aspect-ratio: 16 / 11; max-width: 100%; border-radius: 24px; border: 1px solid var(--plate-line);
  background: radial-gradient(60% 70% at 50% 45%, rgba(110,96,210,.16), transparent 70%), radial-gradient(40% 50% at 60% 30%, rgba(212,166,94,.10), transparent 70%); }
.sky__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky__lines polyline { fill: none; stroke: rgba(212,166,94,.55); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.star { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 8px; padding: 6px; background: none; border: 0; cursor: pointer; color: var(--plate-ink-2); font: inherit; }
.star i { width: 12px; height: 12px; border-radius: 50%; background: #e6c48a; box-shadow: 0 0 0 4px rgba(212,166,94,.14), 0 0 18px rgba(230,196,138,.55); transition: transform var(--dur-2) var(--ease); }
.star b { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.star:hover i, .star[aria-pressed="true"] i { transform: scale(1.45); }
.star[aria-pressed="true"] i { background: #fff3da; box-shadow: 0 0 0 6px rgba(212,166,94,.2), 0 0 28px rgba(255,236,200,.9); }
.star[aria-pressed="true"] b { color: #f2dfba; }
.sky__card { display: grid; gap: 14px; justify-items: start; padding: 32px; border-radius: 22px; background: rgba(255,255,255,.035); border: 1px solid var(--plate-line); backdrop-filter: blur(6px); }
.sky__card h3 { font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1.1; color: var(--plate-ink); }
.sky__card p { color: var(--plate-ink-2); }
.sky__card ul { color: var(--plate-ink-2); }
.wwd-a .wwd__link { color: var(--gold-300); }
.wwd-a .promises { border-top-color: var(--plate-line); color: var(--plate-ink-2); }
.wwd-a .promises b { color: var(--plate-ink); }
@media (max-width: 640px) { .sky__map { aspect-ratio: 1 / 1; } .star b { font-size: 9.5px; letter-spacing: .1em; } .sky__card { padding: 24px; } .sky__card h3 { font-size: 1.6rem; } }

/* ---------- Option B: start from what you need ---------- */
.needs { display: grid; gap: 14px; margin-bottom: 28px; }
.needs__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.need { font: inherit; font-size: var(--t-sm); font-weight: 500; padding: 12px 18px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: all var(--dur-2) var(--ease); }
.need:hover { border-color: var(--accent-line); color: var(--ink); }
.need[aria-selected="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--navy-950); font-weight: 600; }
.need__pane { display: grid; gap: 32px; align-items: center; padding: 40px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
@media (min-width: 900px) { .need__pane { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; padding: 56px; } }
.need__copy { display: grid; gap: 16px; justify-items: start; }
.need__copy h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.08; }
.need__copy p { color: var(--ink-2); font-size: 1.0625rem; }
.need__copy ul { color: var(--ink-2); }
.need__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 6px; }
.need__viz { display: grid; justify-items: center; }
.need__viz .phone { width: min(260px, 70vw); }
.needs__also { margin-top: 22px; color: var(--ink-3); font-size: var(--t-sm); }
.needs__also b { color: var(--ink-2); font-weight: 600; }
@media (max-width: 640px) { .need__pane { padding: 24px; } .needs__chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; } .need { flex: none; } }

/* ---------- Option C: the index ---------- */
.idx { display: grid; gap: 40px; }
@media (min-width: 1000px) { .idx { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; align-items: start; } .idx__side { position: sticky; top: 100px; } }
.idx__list { border-top: 1px solid var(--line); }
.idx__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; gap: 4px 20px; align-items: center; padding: 22px 8px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background var(--dur-2) var(--ease), padding var(--dur-2) var(--ease); }
.idx__t { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.15; color: var(--ink); }
.idx__p { grid-column: 1; grid-row: 2; color: var(--ink-3); font-size: var(--t-sm); }
.idx__row .typemark { grid-column: 2; grid-row: 1 / span 2; }
.idx__go { grid-column: 3; grid-row: 1 / span 2; color: var(--ink-3); transition: transform var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.idx__row:hover, .idx__row[aria-current="true"] { background: linear-gradient(90deg, var(--accent-soft), transparent); padding-left: 20px; }
.idx__row:hover .idx__go, .idx__row[aria-current="true"] .idx__go { color: var(--accent); transform: translateX(4px); }
.idx__row[aria-current="true"] .idx__t { color: var(--accent); }
.idx__viz { display: grid; justify-items: center; }
.idx__viz .phone { width: min(300px, 70vw); }
@media (max-width: 999px) { .idx__side { display: none; } }
@media (max-width: 560px) { .idx__row .typemark { display: none; } }
.need__pane[hidden], .sky__card[hidden], .idx__viz[hidden] { display: none !important; }

/* ---------- Constellation, two skies: the client's ring (in the app) and the open desks ---------- */
.sky__map { aspect-ratio: 160 / 110; }
.sky__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky__lines--tall { display: none; }
.sky__lines .ring { fill: rgba(212,166,94,.035); stroke: rgba(212,166,94,.42); stroke-width: .35; stroke-dasharray: 1.2 1.4; }
.sky__lines .ring--in { fill: none; stroke: rgba(212,166,94,.16); stroke-dasharray: none; }
.sky__lines .spokes line { stroke: rgba(212,166,94,.22); stroke-width: .3; }
.sky__lines .pub, .sky__lines .bridge { fill: none; stroke: rgba(230,196,138,.55); stroke-width: .35; stroke-dasharray: 1 1.2; }
.sky__lines .bridge { stroke: rgba(230,196,138,.25); }
.sky__lines polyline { vector-effect: none; }
.you { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.you img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(212,166,94,.5), 0 0 0 8px rgba(212,166,94,.08), 0 0 40px rgba(230,196,138,.35); }
.you b { font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 1.05rem; color: #f2dfba; }
.star--client i { background: transparent; border: 2px solid #e6c48a; box-shadow: 0 0 0 4px rgba(212,166,94,.10), 0 0 14px rgba(230,196,138,.35); }
.star--client[aria-pressed="true"] i { background: #fff3da; border-color: #fff3da; }
.star b { text-shadow: 0 1px 8px rgba(7,11,26,.9); }
.sky__legend { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 14px; font-size: var(--t-xs); color: var(--plate-ink-2); }
.sky__legend li { display: flex; gap: 8px; align-items: center; }
.sky__legend b { color: var(--plate-ink); font-weight: 600; }
.lg { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lg--public { background: #e6c48a; box-shadow: 0 0 8px rgba(230,196,138,.6); }
.lg--client { border: 2px solid #e6c48a; }
.kind { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.kind .ico { width: 13px; height: 13px; }
.kind--client { background: rgba(212,166,94,.14); color: #e6c48a; border: 1px solid rgba(212,166,94,.35); }
.kind--public { background: rgba(127,183,164,.10); color: #9fd2bf; border: 1px solid rgba(127,183,164,.3); }
.sky__card--client { border-color: rgba(212,166,94,.45); background: linear-gradient(160deg, rgba(212,166,94,.08), rgba(255,255,255,.02)); }
.sky__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.sky__note { font-size: var(--t-xs) !important; color: #8a92ad !important; }
@media (max-width: 760px) {
  .sky__map { aspect-ratio: 100 / 125; }
  .sky__lines--wide { display: none; }
  .sky__lines--tall { display: block; }
  .star, .you { left: var(--mx); top: var(--my); }
}
#services ul.sky__legend li::before { content: none; }
@media (max-width: 760px) { .wwd-a { padding-block: 72px; } }