/* Orpheon: shared styles. House style from the Sports Capital Office deck (v6). */
:root {
  --navy: #1E2734;
  --navy-2: #243042;
  --navy-3: #2A3544;
  --blue: #1F5FA8;
  --blue-soft: #8FB0DA;
  --blue-tint: #E4ECF6;
  --ink: #1E2533;
  --body: #2B3340;
  --grey: #5F6878;
  --grey-2: #9AA3B0;
  --line: #D9DEE5;
  --line-dark: rgba(255,255,255,0.14);
  --on-dark: #C3CBD6;
  --mist: #F3F5F8;
  --white: #FFFFFF;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --max: 1200px;
  --gutter: clamp(20px, 5vw, 72px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--white); color: var(--body); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* Type */
.label { font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--blue); }
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; color: var(--ink); }
h2 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.12; letter-spacing: -0.01em; max-width: 900px; margin-top: 18px; }
h3 { font-size: 21px; line-height: 1.3; }
.kicker { font-size: 18px; color: var(--grey); max-width: 660px; margin-top: 18px; }
.dark { background: var(--navy); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3, .dark .serif { color: var(--white); }
.dark .label { color: var(--blue-soft); }
.dark .kicker { color: var(--on-dark); }
section { padding: clamp(80px, 10vw, 132px) 0; }
.mist { background: var(--mist); }

/* Header */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; transition: background .35s, border-color .35s; border-bottom: 1px solid transparent; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.wordmark { font-size: 14px; letter-spacing: 0.5em; color: var(--white); transition: color .35s; }
.nav ul { display: flex; gap: 34px; list-style: none; }
.nav ul a { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.72); transition: color .2s; }
.nav ul a:hover, .nav ul a.current { color: var(--white); }
header.solid { background: rgba(255,255,255,0.97); border-bottom-color: var(--line); backdrop-filter: blur(8px); }
header.solid .wordmark { color: var(--grey); }
header.solid .nav ul a { color: var(--grey); }
header.solid .nav ul a:hover, header.solid .nav ul a.current { color: var(--blue); }
.menu-btn { display: none; width: 32px; height: 32px; position: relative; }
.menu-btn span, .menu-btn::before, .menu-btn::after { content: ""; position: absolute; left: 5px; right: 5px; height: 1.5px; background: var(--white); transition: transform .25s, opacity .25s, background .35s; }
header.solid .menu-btn span, header.solid .menu-btn::before, header.solid .menu-btn::after,
.menu-open .menu-btn span, .menu-open .menu-btn::before, .menu-open .menu-btn::after { background: var(--ink); }
.menu-btn::before { top: 10px; } .menu-btn span { top: 15.5px; } .menu-btn::after { top: 21px; }
.menu-open .menu-btn::before { transform: translateY(5.5px) rotate(45deg); }
.menu-open .menu-btn span { opacity: 0; }
.menu-open .menu-btn::after { transform: translateY(-5.5px) rotate(-45deg); }

/* Hero */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; padding: 140px 0 120px; }
.hero .wrap { width: 100%; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(56px, 10vw, 140px); line-height: 1; letter-spacing: -0.025em; margin-top: 26px; }
.hero h1.long { font-size: clamp(42px, 6.4vw, 88px); line-height: 1.05; max-width: 12ch; }
.hero .rule { width: 56px; height: 3px; background: var(--blue); border: 0; margin: 40px 0 28px; }
.hero .tag { font-family: var(--serif); font-size: clamp(21px, 2.2vw, 28px); color: #D5DBE3; max-width: 640px; line-height: 1.4; }
.hero .home-of { margin-top: 22px; font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--blue-soft); }
.hero-rings { position: absolute; right: -12vw; top: 50%; width: min(78vw, 960px); aspect-ratio: 1; transform: translateY(-50%); opacity: 0.55; pointer-events: none; }
.scroll-cue { position: absolute; left: max(var(--gutter), calc((100% - var(--max)) / 2)); bottom: 44px; font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--grey-2); display: flex; align-items: center; gap: 16px; z-index: 1; }
.scroll-cue::before { content: ""; width: 1px; height: 40px; background: var(--blue-soft); animation: cue 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%,100% { transform: scaleY(.35); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
.btn { display: inline-block; margin-top: 40px; background: var(--white); color: var(--navy); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; padding: 17px 28px; border-radius: 4px; transition: background .2s; }
.btn:hover { background: var(--blue-soft); }

/* Shared ring motion (hero rings and the Sports Capital Office) */
.rotor { transform-box: view-box; transform-origin: 0 0; animation: spin 36s linear infinite; }
.rotor.rev { animation-duration: 52s; animation-direction: reverse; }
.pulse { transform-box: view-box; transform-origin: 0 0; animation: pulseRing 4.5s ease-out infinite; }
.pulse.p2 { animation-delay: 2.25s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseRing { 0% { transform: scale(0.85); opacity: 0; } 20% { opacity: 0.55; } 100% { transform: scale(1.75); opacity: 0; } }

/* ============ The Sports Capital Office (interactive) ============ */
.sco-section { position: relative; overflow: hidden; }
.sco-section::before { content: ""; position: absolute; left: 50%; top: 58%; width: 1100px; height: 1100px; transform: translate(-62%, -50%); background: radial-gradient(circle, rgba(31,95,168,0.28) 0%, rgba(31,95,168,0) 60%); pointer-events: none; }
.sco-section .wrap { position: relative; }
.sco-section { padding: clamp(64px, 8vw, 104px) 0; }
.sco { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: 56px; align-items: center; margin-top: 20px; }
.sco-stage { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1; margin: 0 auto; }
.sco-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sco-stage .ring { fill: none; stroke: rgba(143,176,218,0.22); stroke-width: 1.5; }
.sco-stage .ring.lead { stroke: rgba(143,176,218,0.55); stroke-width: 2; }
.sco-stage .ring.outer { stroke-dasharray: 3 9; stroke: rgba(143,176,218,0.28); }
.sco-stage .ring-text { font-family: var(--sans); font-size: 21px; letter-spacing: 7px; fill: var(--blue-soft); }
.sco-stage .ring-text.outer { font-size: 18px; letter-spacing: 8px; fill: rgba(195,203,214,0.75); }
.sco-stage .core { fill: var(--blue); }
.sco-stage .pulse { fill: none; stroke: var(--blue-soft); stroke-width: 2; }
.sco-stage .link { stroke: rgba(143,176,218,0.35); stroke-width: 1.5; fill: none; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.3s ease, stroke .3s, stroke-width .3s, opacity .3s; }
.sco-stage .flow { stroke: var(--blue-soft); stroke-width: 2.5; fill: none; stroke-dasharray: 1.2 7; opacity: 0; transition: opacity .6s; animation: flowIn 2.8s linear infinite; }
.sco-stage .marker { fill: var(--navy-2); stroke: var(--blue-soft); stroke-width: 2; transition: fill .3s, r .3s; }
@keyframes flowIn { to { stroke-dashoffset: -16.4; } }
.sco.drawn .link { stroke-dashoffset: 0; }
.sco.drawn .flow { opacity: 0.55; }
.sco.has-active .link { opacity: 0.45; }
.sco .link.on { stroke: var(--blue-soft); stroke-width: 2.5; opacity: 1; filter: drop-shadow(0 0 6px rgba(143,176,218,0.8)); }
.sco .flow.on { opacity: 1; stroke: #CFE0F7; }
.sco .marker.on { fill: var(--blue); }
.sco-core { position: absolute; left: 50%; top: 50%; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px; pointer-events: none; }
.sco-core .label { font-size: 9px; letter-spacing: 0.26em; color: #D3E0F1; }
.sco-core .serif { color: var(--white); font-size: clamp(15px, 1.7vw, 22px); line-height: 1.15; margin-top: 6px; }
.sco-core small { display: block; font-size: 11px; color: #D3E0F1; margin-top: 6px; line-height: 1.3; }
.sco-node { position: absolute; transform: translate(-50%, -50%) scale(0.85); opacity: 0; width: max-content; max-width: 172px; padding: 9px 15px; border-radius: 999px; background: var(--navy-2); border: 1px solid rgba(143,176,218,0.4); color: var(--white); font-size: 13px; line-height: 1.25; text-align: center; transition: opacity .6s ease, transform .6s ease, background .25s, border-color .25s, box-shadow .25s; }
.sco-node.dashed { border-style: dashed; background: var(--navy); color: #D5DBE3; }
.sco.drawn .sco-node { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sco-node:hover, .sco-node:focus-visible { border-color: var(--blue-soft); outline: none; }
.sco-node.on { background: var(--blue); border-color: #CFE0F7; box-shadow: 0 0 0 6px rgba(31,95,168,0.3), 0 0 24px rgba(143,176,218,0.35); color: var(--white); }
.sco-panel { border-left: 2px solid var(--blue); padding: 6px 0 6px 28px; min-height: 250px; }
.sco-panel .count { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--blue-soft); }
.sco-panel h3 { font-size: clamp(24px, 2.4vw, 30px); margin-top: 14px; color: var(--white); }
.sco-panel p.text { font-size: 17px; color: var(--on-dark); margin-top: 12px; }
.sco-panel .gets { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-dark); font-family: var(--serif); font-size: 18px; color: var(--white); }
.sco-panel .gets span { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: 6px; }
.sco-panel .fade { animation: panelIn .45s ease; }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sco-hint { margin-top: 26px; font-size: 13px; color: var(--grey-2); }
.sco-list { display: none; }
.sco-foot { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: 15px; color: var(--on-dark); max-width: 900px; }

/* Tabs (What we do / college themes) */
.tabs { margin-top: 44px; }
.tablist { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.tab { text-align: left; padding: 18px 20px 20px 0; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: border-color .25s, color .25s; }
.tab .num { font-family: var(--serif); font-size: 18px; color: var(--grey-2); display: block; transition: color .25s; }
.tab .t { font-family: var(--serif); font-size: clamp(19px, 2vw, 25px); color: var(--grey); display: block; margin-top: 4px; transition: color .25s; }
.tab:hover .t { color: var(--ink); }
.tab[aria-selected="true"] { border-color: var(--blue); }
.tab[aria-selected="true"] .num { color: var(--blue); }
.tab[aria-selected="true"] .t { color: var(--ink); }
.tabpanel { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; padding-top: 36px; align-items: start; }
.tabpanel[hidden] { display: none; }
.tabpanel .lead { font-family: var(--serif); font-size: clamp(20px, 2vw, 25px); line-height: 1.45; color: var(--ink); }
.tabpanel .side .label { display: block; margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 13px; padding: 7px 13px; border-radius: 999px; background: var(--blue-tint); color: var(--ink); }
.tabpanel.fade { animation: panelIn .45s ease; }
.sources { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 26px; }
.sources > div { border-top: 2px solid var(--blue); padding-top: 14px; }
.sources h3 { font-size: 19px; }
.sources p { font-size: 15px; color: var(--body); margin-top: 6px; line-height: 1.5; }
@media (max-width: 720px) { .sources { grid-template-columns: 1fr; gap: 18px; } }
details.more { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
details.more summary { cursor: pointer; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "+"; display: inline-block; width: 18px; font-size: 16px; }
details.more[open] summary::before { content: "\2212"; }
details.more p { font-size: 15px; color: var(--body); margin-top: 10px; }
.why-line { margin-top: 44px; font-size: 15px; color: var(--grey); max-width: 820px; }
.why-line strong { font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--ink); }

/* Doors (Who we serve) */
.doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.door { position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 26px 24px; border-radius: 8px; background: var(--white); border: 1px solid var(--line); overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s; }
.door::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .45s ease; }
.door:hover, .door:focus-within { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(30,39,52,0.10); border-color: var(--blue-soft); }
.door:hover::after, .door:focus-within::after { transform: scaleX(1); }
.door .n { font-family: var(--serif); font-size: 15px; color: var(--grey-2); }
.door h3 { font-size: 24px; margin-top: 18px; }
.door .who { font-size: 13px; color: var(--blue); margin-top: 6px; }
.door p { font-size: 15px; color: var(--body); margin-top: 16px; flex: 1; }
.door .go { margin-top: 18px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); }
.door .go::after { content: " \2192"; }
.door.feature { background: var(--navy); border-color: var(--navy); }
.door.feature h3, .door.feature p { color: var(--white); }
.door.feature .who, .door.feature .go { color: var(--blue-soft); }
.door.feature .n { color: var(--blue-soft); }

/* Businesses and experience */
.owned { background: var(--navy-3); }
.owned .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.owned .grid > div + div { border-left: 1px solid var(--line-dark); padding-left: 72px; }
.owned h3 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 18px; }
.owned p:not(.label) { font-size: 16px; margin-top: 14px; max-width: 480px; }

/* Contact */
.contact { padding: clamp(100px, 12vw, 160px) 0 clamp(80px, 10vw, 130px); }
.contact h2 { font-size: clamp(40px, 6vw, 84px); line-height: 1.04; letter-spacing: -0.02em; margin-top: 24px; }
.contact p.lead { font-family: var(--serif); font-size: clamp(19px, 1.9vw, 24px); color: #D5DBE3; max-width: 680px; margin-top: 26px; line-height: 1.45; }
.contact .mail { margin-top: 16px; font-size: 15px; color: var(--on-dark); }
.contact .mail a { border-bottom: 1px solid var(--blue-soft); }

footer { background: var(--navy); }
footer .inner { padding: 28px 0 34px; border-top: 1px solid var(--line-dark); font-size: 12px; color: #7E8898; }
footer .row { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
footer .dot { margin: 0 8px; }
footer .disclaimer { margin-top: 16px; max-width: 980px; line-height: 1.6; color: #6F7988; }

/* College: rising stages */
.stages { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: end; margin-top: 70px; }
.stages svg.rise { position: absolute; left: 0; top: -46px; width: 100%; height: 160px; pointer-events: none; overflow: visible; }
.stages .rise path { stroke: var(--blue); stroke-width: 2; fill: none; stroke-dasharray: 6 7; }
.stages .rise-label { position: absolute; right: 0; top: -64px; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--blue); }
.stage { border-radius: 8px 8px 0 0; padding: 22px 22px 24px; transform: translateY(40px); opacity: 0; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s; }
.stages.in .stage { transform: none; opacity: 1; }
.stages.in .stage:nth-child(2) { transition-delay: .15s; } .stages.in .stage:nth-child(3) { transition-delay: .3s; }
.stages.in .stage:nth-child(4) { transition-delay: .45s; } .stages.in .stage:nth-child(5) { transition-delay: .6s; }
.stage .gain { display: block; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 700; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid currentColor; }
.stage h3 { font-size: 24px; }
.stage p { font-size: 14px; margin-top: 8px; line-height: 1.5; }
.st1 { min-height: 210px; background: #E4ECF6; } .st2 { min-height: 260px; background: #C9D8EC; }
.st3 { min-height: 310px; background: var(--navy); } .st4 { min-height: 360px; background: var(--blue); }
.st1 .gain, .st2 .gain { color: var(--blue); } .st1 p, .st2 p { color: var(--body); }
.st3 h3, .st4 h3 { color: var(--white); } .st3 .gain { color: var(--blue-soft); } .st4 .gain { color: var(--white); }
.st3 p { color: var(--on-dark); } .st4 p { color: #E3ECF7; }
.throughout { margin-top: 10px; background: var(--navy); color: var(--white); border-radius: 0 0 8px 8px; padding: 14px 22px; display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; }
.throughout b { font-size: 11px; letter-spacing: 0.26em; }
.throughout span { font-size: 15px; color: var(--on-dark); }

/* College: diagnostic flow */
.diag { display: grid; grid-template-columns: 1fr auto 1.1fr auto 1fr; gap: 20px; align-items: center; margin-top: 44px; }
.box { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 22px 24px; }
.box .label { font-size: 10px; }
.box ul { list-style: none; margin-top: 12px; }
.box li { font-size: 15px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--body); }
.box li:first-child { border-top: 0; }
.box.receive li { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.box.mid { background: var(--navy); border-color: var(--navy); text-align: center; padding: 30px 24px; }
.box.mid .label { color: var(--blue-soft); }
.box.mid .serif { color: var(--white); font-size: 26px; margin-top: 10px; }
.box.mid p { color: var(--on-dark); font-size: 14px; margin-top: 10px; }
.darrow { font-size: 26px; color: var(--grey-2); }

/* Hero link to the Capital Office */
.hero-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--white); padding: 15px 22px; border: 1px solid rgba(143,176,218,0.5); border-radius: 4px; transition: background .25s, border-color .25s; }
.hero-link:hover { background: rgba(31,95,168,0.35); border-color: var(--blue-soft); }
.hero-link span { display: inline-block; transition: transform .3s; }
.hero-link:hover span { transform: translateY(3px); }
.hero-sub { margin-top: 20px; font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--blue-soft); }

/* Expanding panels (homepage What we do) */
.acc { display: flex; gap: 12px; margin-top: 44px; min-height: 430px; }
.acc-item { position: relative; flex: 1; min-width: 0; border-radius: 12px; background: var(--mist); border: 1px solid var(--line); padding: 30px 28px; display: flex; flex-direction: column; overflow: hidden; cursor: pointer; outline: none; transition: flex .7s cubic-bezier(.2,.7,.2,1), background .5s, border-color .5s; }
.acc-item:hover, .acc-item:focus-visible { border-color: var(--blue-soft); }
.acc-item.on { flex: 2.7; background: var(--navy); border-color: var(--navy); cursor: default; }
.acc-item .num { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--blue); position: relative; }
.acc-item.on .num { color: var(--blue-soft); }
.acc-item h3 { font-size: clamp(21px, 2vw, 27px); margin-top: 20px; position: relative; transition: color .4s; }
.acc-item.on h3 { color: var(--white); }
.acc-item .tagline { font-size: 15px; color: var(--grey); margin-top: 8px; position: relative; transition: color .4s; }
.acc-item.on .tagline { color: var(--on-dark); }
.acc-item .open-hint { margin-top: auto; padding-top: 20px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--blue); }
.acc-item .open-hint::after { content: " +"; }
.acc-item.on .open-hint { display: none; }
.acc-item .detail { position: relative; max-height: 0; opacity: 0; overflow: hidden; transition: opacity .35s ease, max-height .6s ease; }
.acc-item.on .detail { max-height: 460px; opacity: 1; transition-delay: .25s; }
.acc-item .detail .lead-d { font-family: var(--serif); font-size: clamp(19px, 1.7vw, 22px); line-height: 1.45; color: var(--white); margin-top: 24px; max-width: 560px; }
.acc-item .detail .chips { margin-top: 20px; }
.acc-item .detail .chip { background: rgba(143,176,218,0.16); color: #DCE8F8; }
.acc-item .detail .gets { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-dark); font-family: var(--serif); font-size: 18px; color: var(--white); max-width: 560px; }
.acc-item .detail .gets span { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: 6px; }
.acc-item .deco { position: absolute; right: -90px; bottom: -90px; width: 300px; height: 300px; opacity: 0; transition: opacity .8s; pointer-events: none; }
.acc-item.on .deco { opacity: 0.55; }

/* Value levers (college Where the value is) */
.levers { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 24px; margin-top: 44px; align-items: stretch; }
.lever-list { display: flex; flex-direction: column; gap: 10px; }
.lever { position: relative; text-align: left; padding: 22px 24px 24px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); overflow: hidden; flex: 1; transition: background .35s, border-color .35s; }
.lever:hover { border-color: var(--blue-soft); }
.lever.on { background: var(--navy); border-color: var(--navy); }
.lever .num { font-family: var(--serif); font-size: 15px; color: var(--grey-2); }
.lever h3 { font-size: 23px; margin-top: 6px; transition: color .35s; }
.lever p { font-size: 14px; color: var(--grey); margin-top: 4px; line-height: 1.45; transition: color .35s; }
.lever.on .num { color: var(--blue-soft); }
.lever.on h3 { color: var(--white); }
.lever.on p { color: var(--on-dark); }
.lever .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--blue-soft); }
.levers.playing .lever.on .bar { animation: fillbar 9s linear forwards; }
.levers.paused .lever.on .bar { animation-play-state: paused; }
.levers.stopped .lever .bar { display: none; }
@keyframes fillbar { to { width: 100%; } }
.lever-stage { position: relative; background: var(--navy); border-radius: 12px; padding: 30px 32px 28px; color: var(--on-dark); overflow: hidden; }
.lever-stage::before { content: ""; position: absolute; right: -200px; top: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(31,95,168,0.35), rgba(31,95,168,0) 65%); pointer-events: none; }
.pane { display: none; position: relative; }
.pane.on { display: block; animation: panelIn .5s ease; }
.pane .label { color: var(--blue-soft); }
.pane h3 { color: var(--white); font-size: clamp(24px, 2.3vw, 30px); margin-top: 10px; }
.viz { display: block; width: 100%; height: auto; margin-top: 18px; overflow: visible; }
.viz text { font-family: var(--sans); fill: var(--on-dark); font-size: 13px; }
.viz .t-strong { font-family: var(--serif); fill: var(--white); font-size: 17px; }
.viz .t-small { font-size: 11px; letter-spacing: 2px; fill: var(--blue-soft); }
.viz .src { fill: #243042; stroke: rgba(143,176,218,0.45); stroke-width: 1.5; }
.viz .flowp { fill: none; stroke: var(--blue-soft); stroke-width: 2; stroke-dasharray: 4 8; animation: flowIn2 1.4s linear infinite; }
.viz .ring-p { fill: none; stroke: var(--blue-soft); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: pulseRing 3s ease-out infinite; }
@keyframes flowIn2 { to { stroke-dashoffset: -24; } }
.pane.on .grow { transform-box: fill-box; transform-origin: bottom; animation: growUp 1.1s cubic-bezier(.2,.7,.2,1) both; }
.pane.on .drop { animation: dropIn .55s ease both; }
.pane.on .draw { stroke-dasharray: 600; stroke-dashoffset: 600; animation: drawIn 1.3s ease forwards; }
@keyframes growUp { from { transform: scaleY(0); } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-12px); } }
@keyframes drawIn { to { stroke-dashoffset: 0; } }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; border-top: 1px solid var(--line-dark); }
.steps3 > div { padding: 16px 18px 0 0; position: relative; }
.steps3 > div + div { padding-left: 18px; border-left: 1px solid var(--line-dark); }
.steps3 span { display: block; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--blue-soft); }
.steps3 p { font-size: 14px; color: var(--on-dark); margin-top: 6px; line-height: 1.5; }
.steps3 > div:last-child p { color: var(--white); font-family: var(--serif); font-size: 16px; }
.pane-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-top: 22px; flex-wrap: wrap; }
.pane-foot .chip { background: rgba(143,176,218,0.16); color: #DCE8F8; }
.pane details.more { border-top: 0; padding-top: 0; margin-top: 0; max-width: 320px; }
.pane details.more summary { color: var(--blue-soft); }
.pane details.more p { color: var(--on-dark); font-size: 14px; }
.levers-note { margin-top: 20px; font-size: 14px; color: var(--grey); }

/* College How we work: stages reveal more on hover */
.stage { position: relative; z-index: 1; cursor: default; outline: none; }
.stage:hover, .stage:focus-within, .stage:focus-visible { box-shadow: 0 18px 40px rgba(30,39,52,0.18); }
.stage-more { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s ease, opacity .35s ease; }
.stage:hover .stage-more, .stage:focus .stage-more, .stage.open .stage-more { max-height: 320px; opacity: 1; transition-delay: .05s; }
.stage-more ul { list-style: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid currentColor; }
.stage-more li { font-size: 13px; line-height: 1.45; padding: 4px 0 4px 14px; position: relative; }
.stage-more li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 6px; height: 1px; background: currentColor; }
.stage-more .deliv { margin-top: 10px; font-family: var(--serif); font-size: 15px; }
.stage-more .deliv span { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.8; margin-bottom: 3px; }
.st1 .stage-more, .st2 .stage-more { color: var(--body); }
.st3 .stage-more { color: var(--on-dark); }
.st4 .stage-more { color: #E3ECF7; }
.hover-hint { margin-top: 14px; font-size: 13px; color: var(--grey); }

/* College Where we start: expandable points */
.startflow { display: grid; grid-template-columns: 1fr 48px 1fr 48px 1fr; align-items: stretch; margin-top: 44px; }
.col-card { border-radius: 12px; padding: 26px 24px 18px; }
.col-card.provide { background: var(--white); border: 1px solid var(--line); }
.col-card.diagnostic { background: var(--navy); }
.col-card.receive { background: var(--blue); }
.col-card .label { font-size: 10px; }
.col-card.diagnostic .label { color: var(--blue-soft); }
.col-card.receive .label { color: #D3E0F1; }
.col-card h3 { font-size: 24px; margin-top: 8px; margin-bottom: 10px; }
.col-card.diagnostic h3, .col-card.receive h3 { color: var(--white); }
.xi { border-top: 1px solid var(--line); }
.col-card.diagnostic .xi, .col-card.receive .xi { border-color: rgba(255,255,255,0.16); }
.xi-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; text-align: left; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.col-card.diagnostic .xi-head, .col-card.receive .xi-head { color: var(--white); }
.xi-head::after { content: "+"; font-family: var(--sans); font-size: 18px; line-height: 1; color: var(--blue); transition: transform .3s; flex: none; }
.col-card.diagnostic .xi-head::after { color: var(--blue-soft); }
.col-card.receive .xi-head::after { color: var(--white); }
.xi.open .xi-head::after { transform: rotate(45deg); }
.xi-body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s ease, opacity .3s ease; }
.xi.open .xi-body { max-height: 220px; opacity: 1; }
.xi-body p { font-size: 14px; line-height: 1.55; padding-bottom: 14px; color: var(--body); }
.col-card.diagnostic .xi-body p { color: var(--on-dark); }
.col-card.receive .xi-body p { color: #E3ECF7; }
.flow-arrow { align-self: center; width: 100%; height: 20px; overflow: visible; }
.flow-arrow line { stroke: var(--blue); stroke-width: 2; stroke-dasharray: 4 6; animation: flowIn2 1.2s linear infinite; }
.flow-arrow path { fill: var(--blue); }
.start-foot { margin-top: 26px; font-size: 15px; color: var(--grey); }
.start-foot strong { font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--ink); }

@media (max-width: 1000px) {
  .levers { grid-template-columns: 1fr; }
  .lever-list { flex-direction: row; }
  .lever { padding: 16px 16px 18px; }
  .lever p { display: none; }
  .startflow { grid-template-columns: 1fr; gap: 10px; }
  .flow-arrow { transform: rotate(90deg); width: 40px; justify-self: center; }
}
@media (max-width: 820px) {
  .acc { flex-direction: column; min-height: 0; }
  .acc-item, .acc-item.on { flex: none; }
  .acc-item .deco { display: none; }
  .steps3 { grid-template-columns: 1fr; }
  .steps3 > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-dark); margin-top: 14px; }
  .lever-list { flex-direction: column; }
  .viz text { font-size: 15px; }
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; } .d3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .stage { opacity: 1; transform: none; transition: none; }
  .rotor, .pulse, .scroll-cue::before, .sco-stage .flow, .viz .flowp, .viz .ring-p, .flow-arrow line { animation: none; }
  .pane.on .grow, .pane.on .drop, .pane.on .draw, .pane.on { animation: none; stroke-dashoffset: 0; }
  .acc-item, .acc-item .detail, .stage-more, .xi-body { transition: none; }
  .sco-stage .link { transition: none; }
  .sco-node { transition: background .2s, border-color .2s; }
}

/* Responsive */
@media (max-width: 1100px) { .nav ul { gap: 24px; } }
@media (max-width: 1000px) {
  .sco { grid-template-columns: 1fr; gap: 36px; }
  .sco-panel { min-height: 0; }
  .tabpanel { grid-template-columns: 1fr; gap: 24px; }
  .doors { grid-template-columns: 1fr 1fr; }
  .door { min-height: 0; }
  .owned .grid { grid-template-columns: 1fr; gap: 40px; }
  .owned .grid > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-dark); padding-top: 40px; }
  .stages { grid-template-columns: 1fr 1fr; }
  .stages svg.rise, .stages .rise-label { display: none; }
  .st1, .st2, .st3, .st4 { min-height: 0; }
  .stage { border-radius: 8px; }
  .diag { grid-template-columns: 1fr; }
  .darrow { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 1000px) {
  .nav ul { position: fixed; inset: 84px 0 auto 0; background: var(--white); flex-direction: column; gap: 0; border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px; display: none; }
  .nav ul a, header.solid .nav ul a { display: block; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--grey); }
  .nav ul a.current, header.solid .nav ul a.current { color: var(--blue); }
  .menu-open header { background: var(--white); }
  .menu-open .wordmark { color: var(--grey); }
  .menu-open .nav ul { display: flex; }
  .menu-btn { display: block; }
  .hero-rings { right: -40vw; width: 120vw; opacity: 0.3; }
}
@media (max-width: 720px) {
  .sco-node { display: none; }
  .sco-stage .ring-text { display: none; }
  .sco-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .sco-list button { font-size: 13px; padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(143,176,218,0.4); background: var(--navy-2); color: var(--white); }
  .sco-list button.dashed { border-style: dashed; background: transparent; }
  .sco-list button.on { background: var(--blue); border-color: #CFE0F7; }
  .sco-core .label { display: none; }
  .sco-core small { display: none; }
  .tablist { grid-template-columns: 1fr; }
  .tab { padding: 14px 0; }
  .doors { grid-template-columns: 1fr; }
  .stages { grid-template-columns: 1fr; }
}

/* ============ Money flow: many revenue streams, one balance sheet ============ */
.mflow { position: relative; margin-top: 52px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 clamp(56px, 8vw, 120px); align-items: center; }
.mf-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.mf-lines .base { fill: none; stroke: #C9D2DE; stroke-width: 1.3; transition: stroke .3s, stroke-width .3s; }
.mf-lines .fl { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-dasharray: 2 10; stroke-linecap: round; opacity: 0.3; animation: mfFlow 1.5s linear infinite; transition: opacity .3s; }
.mf-lines g.on .base { stroke: var(--blue-soft); stroke-width: 2; }
.mf-lines g.on .fl { opacity: 1; stroke-width: 2.8; }
@keyframes mfFlow { to { stroke-dashoffset: -12; } }
.mf-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.mf-head { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.mf-col.out .mf-head { text-align: right; }
.mf-item { text-align: left; padding: 13px 16px; border: 1px solid #B9C3D0; border-radius: 8px; background: var(--white); font-size: 15px; line-height: 1.3; color: var(--ink); transition: border-color .25s, background .25s, box-shadow .25s; }
.mf-item.dashed { border-style: dashed; background: var(--mist); color: var(--grey); }
.mf-item:hover, .mf-item:focus-visible { border-color: var(--blue); outline: none; }
.mf-item.on { border-color: var(--blue); background: var(--blue-tint); box-shadow: 0 0 0 4px rgba(31,95,168,0.12); }
.mf-mid { position: relative; z-index: 1; display: flex; flex-direction: column; }
.mf-orph { text-align: center; padding: 18px 20px; background: var(--mist); border: 1px solid var(--line); border-radius: 10px; transition: border-color .25s, box-shadow .25s; }
.mf-orph p:not(.label) { font-size: 14px; color: var(--body); margin-top: 8px; line-height: 1.45; }
.mf-orph.on, .mf-orph:hover, .mf-orph:focus-visible { border-color: var(--blue); outline: none; }
.mf-orph.on { box-shadow: 0 0 0 4px rgba(31,95,168,0.12); }
.mf-loop { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0; }
.mf-loop svg { width: 44px; height: 44px; flex: none; }
.mf-loop .spin { transform-box: view-box; transform-origin: 0 0; animation: spin 7s linear infinite; }
.mf-loop span { font-family: var(--serif); font-size: 17px; color: var(--blue); line-height: 1.2; }
.mf-loop small { display: block; font-family: var(--sans); font-size: 12px; color: var(--grey); margin-top: 2px; }
.mf-core { text-align: center; padding: 28px 22px; background: var(--navy); border-radius: 10px; color: var(--on-dark); transition: box-shadow .25s; }
.mf-core .label { color: var(--blue-soft); }
.mf-core .serif { color: var(--white); font-size: clamp(20px, 2vw, 26px); line-height: 1.2; margin-top: 10px; }
.mf-core small { display: block; font-size: 12px; margin-top: 12px; color: var(--on-dark); }
.mf-core.on, .mf-core:focus-visible { box-shadow: 0 0 0 5px rgba(31,95,168,0.3); outline: none; }
.mf-cap { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px 48px; min-height: 150px; }
.mf-cap .where { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--blue); }
.mf-cap h3 { margin-top: 10px; font-size: clamp(22px, 2.2vw, 28px); }
.mf-cap .text { margin-top: 8px; font-size: 16px; color: var(--grey); }
.mf-cap .orph { border-left: 2px solid var(--blue); padding-left: 22px; align-self: start; }
.mf-cap .orph span { display: block; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--blue); }
.mf-cap .orph p { margin-top: 8px; font-family: var(--serif); font-size: 19px; line-height: 1.4; color: var(--ink); }
.mf-cap .fade { animation: panelIn .45s ease; }
.mf-band { margin-top: 30px; background: var(--navy); color: var(--on-dark); border-radius: 8px; padding: 18px 26px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.mf-band b { font-size: 12px; letter-spacing: 0.26em; color: var(--white); font-weight: 700; }
.mf-band span { font-size: 15px; }
.mf-hint { margin-top: 14px; font-size: 13px; color: var(--grey-2); }
.wwd-sub { margin-top: 72px; }
.wwd-sub h3 { font-size: clamp(24px, 2.4vw, 30px); margin-top: 12px; }
@media (max-width: 900px) {
  .mflow { grid-template-columns: 1fr; gap: 0; }
  .mf-lines { display: none; }
  .mf-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mf-head, .mf-col.out .mf-head { grid-column: 1 / -1; text-align: left; }
  .mf-item { font-size: 14px; padding: 11px 12px; }
  .mf-mid { margin: 16px 0; }
  .mf-mid::before, .mf-mid::after { content: "\2193"; display: block; text-align: center; color: var(--blue); font-size: 20px; line-height: 1; padding: 0 0 12px; }
  .mf-mid::after { padding: 12px 0 0; }
  .mf-cap { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mf-lines .fl, .mf-loop .spin { animation: none; }
}

/* ============ Capital Office: partners serve the client, Orpheon connects them ============ */
.sco-position { margin-top: 14px; max-width: 700px; font-size: 16px; color: var(--on-dark); padding-left: 16px; border-left: 2px solid var(--blue-soft); }
.sco-position b { font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--white); }
.sco-stage .tie { fill: none; stroke: #DCE8F8; stroke-width: 9; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
.sco-stage .tie.on { opacity: 1; filter: drop-shadow(0 0 8px rgba(143,176,218,0.9)); }
.sco-panel .ex { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sco-panel .ex-label { width: 100%; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: 2px; }
.sco-panel .ex-chip { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(143,176,218,0.4); background: var(--navy-2); color: var(--white); }
.sco-key { margin-top: 24px; display: grid; gap: 8px; }
.sco-key p { font-size: 13px; color: var(--grey-2); display: flex; align-items: center; gap: 12px; }
.sco-key i { flex: none; display: inline-block; }
.sco-key .k-line { width: 26px; height: 0; border-top: 2px dotted var(--blue-soft); }
.sco-key .k-arc { width: 26px; height: 7px; border-radius: 4px; background: #DCE8F8; box-shadow: 0 0 8px rgba(143,176,218,0.9); }
@media (prefers-reduced-motion: reduce) { .sco-stage .tie { transition: none; } }
/* ============ Company line, mechanism and always-visible outcomes ============ */
.hero .hero-co { margin-top: 14px; font-size: 15px; color: var(--on-dark); max-width: 520px; line-height: 1.55; }
.mech { margin-top: 34px; background: var(--mist); border-radius: 12px; padding: 28px 30px; display: grid; grid-template-columns: 200px 1fr; gap: 20px 36px; }
.mech-head h3 { margin-top: 10px; font-size: 24px; }
.mech-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mech-steps li { border-top: 2px solid var(--blue); padding-top: 12px; }
.mech-steps b { font-family: var(--serif); font-weight: 400; font-size: 15px; color: var(--blue); margin-right: 8px; }
.mech-steps span { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.mech-steps p { margin-top: 6px; font-size: 14px; color: var(--grey); line-height: 1.5; }
.mech-value { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.mech-value span { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--blue); margin-right: 8px; }
.mech-value i { font-style: normal; font-size: 14px; padding: 6px 13px; border-radius: 999px; background: var(--navy); color: var(--white); }
.acc-item .outcome { position: relative; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 16px; line-height: 1.4; color: var(--ink); }
.acc-item .outcome span { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--blue); margin-bottom: 5px; }
.acc-item .outcome + .open-hint { margin-top: 0; padding-top: 14px; }
.acc-item.on .outcome { display: none; }
.stage > .deliv { margin-top: 14px; padding-top: 10px; border-top: 1px solid currentColor; font-family: var(--serif); font-size: 15px; line-height: 1.35; }
.stage > .deliv span { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.8; margin-bottom: 3px; }
@media (max-width: 900px) {
  .mech { grid-template-columns: 1fr; padding: 24px 20px; }
  .mech-steps { grid-template-columns: 1fr; gap: 16px; }
  .mech-value { grid-column: 1; }
}
/* ============ Partner network, contribution strip, tour control ============ */
.sco-foot a { color: var(--blue-soft); white-space: nowrap; }
.sco-foot a:hover { color: var(--white); }
.sco-panel .ex.sourced .ex-label { color: var(--grey-2); }
.sco-panel .ex.sourced .ex-chip { border-style: dashed; background: transparent; color: #D5DBE3; }
.contrib { margin-top: 28px; display: grid; grid-template-columns: 220px 1fr; gap: 16px 36px; align-items: center; padding: 22px 28px; border-radius: 12px; background: var(--mist); }
.contrib ol { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; counter-reset: c; }
.contrib li { position: relative; padding: 12px 16px 12px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.contrib li:not(:last-child)::after { content: "\2192"; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: var(--blue); font-size: 15px; z-index: 1; }
.contrib b { display: block; font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--ink); }
.contrib span { font-size: 13px; color: var(--grey); }
.tour-btn { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.08em; color: var(--blue-soft); padding: 6px 12px 6px 10px; border: 1px solid rgba(143,176,218,0.4); border-radius: 999px; }
.tour-btn::before { content: ""; width: 8px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.tour-btn.paused::before { width: 0; height: 0; border-left: 8px solid currentColor; border-right: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.tour-btn:hover { color: var(--white); border-color: var(--blue-soft); }
.tour-host .tour-btn { color: var(--blue); border-color: var(--line); margin-top: 18px; }
.tour-host .tour-btn:hover { color: var(--ink); }
@media (max-width: 1000px) {
  .contrib { grid-template-columns: 1fr; }
  .contrib ol { grid-template-columns: repeat(2, 1fr); }
  .contrib li::after { display: none; }
}

.sco-key .tour-btn { justify-self: start; }
.contrib li:not(:last-child)::after { right: -11px; background: var(--mist); padding: 0 1px; }

/* ============ Partner network: objectives, specialists, client outcome ============ */
.netx { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 56px; align-items: start; }
.nx-head { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.nx-objs { display: flex; flex-direction: column; gap: 8px; }
.nx-obj { position: relative; text-align: left; padding: 16px 20px 18px 56px; border-radius: 10px; border: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s; }
.nx-obj .n { position: absolute; left: 18px; top: 17px; font-family: var(--serif); font-size: 16px; color: var(--grey-2); transition: color .3s; }
.nx-obj b { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--ink); line-height: 1.25; }
.nx-obj em { display: block; margin-top: 6px; font-style: normal; font-size: 12px; letter-spacing: 0.04em; color: var(--blue); }
.nx-obj p { margin-top: 6px; font-size: 14px; color: var(--grey); line-height: 1.5; }
.nx-obj:hover { border-color: var(--line); }
.nx-obj.on { background: var(--white); border-color: var(--blue-soft); box-shadow: 0 14px 30px rgba(30,39,52,0.08); }
.nx-obj.on .n { color: var(--blue); }
.nx-obj::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--blue); transform: scaleY(0); transition: transform .35s; }
.nx-obj.on::before { transform: scaleY(1); }
.nx-objs .tour-btn { align-self: flex-start; color: var(--blue); border-color: var(--line); margin-left: 20px; }
.nx-map { position: relative; padding-top: 30px; }
.nx-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nx-lines .base { fill: none; stroke: #CDD5E0; stroke-width: 1.2; transition: stroke .35s, stroke-width .35s; }
.nx-lines .fl { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-dasharray: 2 10; stroke-linecap: round; opacity: 0; animation: mfFlow 1.3s linear infinite; transition: opacity .35s; }
.nx-lines g.on .base { stroke: var(--blue-soft); stroke-width: 2; }
.nx-lines g.on .fl { opacity: 1; }
.nx-orph, .nx-partners, .nx-client { position: relative; z-index: 1; }
.nx-orph { width: min(420px, 90%); margin: 0 auto; text-align: center; padding: 16px 24px; border-radius: 999px; background: var(--navy); box-shadow: 0 0 0 8px rgba(30,39,52,0.06); }
.nx-orph span { display: block; font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--blue-soft); }
.nx-orph b { display: block; margin-top: 4px; font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--white); }
.nx-partners { margin: 58px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 18px; }
.nx-p { text-align: center; transition: opacity .4s; }
.nx-p i { display: block; width: 12px; height: 12px; margin: 0 auto 12px; border-radius: 50%; background: var(--mist); border: 2px solid var(--blue-soft); transition: background .35s, box-shadow .35s, border-color .35s; }
.nx-p b { display: block; font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--ink); line-height: 1.25; }
.nx-p span { display: block; margin-top: 5px; font-size: 12px; color: var(--grey); line-height: 1.45; }
.nx-p.sourced i { border-style: dashed; }
.nx-p.sourced b { font-style: italic; }
.nx-p.dim { opacity: 0.38; }
.nx-p.on i { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 5px rgba(31,95,168,0.18); }
.nx-client { width: min(480px, 94%); margin: 0 auto; text-align: center; padding: 18px 26px; border-radius: 12px; background: var(--blue); box-shadow: 0 0 0 8px rgba(31,95,168,0.12); }
.nx-client span { display: block; font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: #DCE8F8; }
.nx-client b { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.3; color: var(--white); }
.nx-client .fade { animation: panelIn .45s ease; }
.net-note { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--grey); }
@media (max-width: 1000px) {
  .netx { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 720px) {
  .nx-lines { display: none; }
  .nx-map { padding-top: 0; }
  .nx-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 26px 0; gap: 22px 12px; }
  .nx-orph b { font-size: 17px; }
  .nx-client b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .nx-lines .fl { animation: none; } }
/* Network map: left-to-right flow, Orpheon -> specialists -> client */
.nx-map { padding-top: 0; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr) minmax(0, 0.9fr); gap: 0 64px; align-items: center; }
.nx-orph { width: auto; margin: 0; border-radius: 16px; padding: 26px 20px; }
.nx-partners { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.nx-p { text-align: left; display: grid; grid-template-columns: 14px 1fr; column-gap: 12px; align-items: center; padding: 6px 0; }
.nx-p i { margin: 0; grid-row: 1 / span 2; align-self: start; margin-top: 5px; }
.nx-p b { font-size: 17px; }
.nx-p span { margin-top: 1px; }
.nx-client { width: auto; margin: 0; padding: 26px 20px; }
.nx-client b { font-size: 20px; }
@media (max-width: 720px) {
  .nx-map { grid-template-columns: 1fr; gap: 20px; }
  .nx-partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
}
@media (min-width: 1241px) { .netx { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.5fr); gap: 44px; } .nx-map { gap: 0 90px; } }

.nav ul a { white-space: nowrap; }
@media (min-width: 1001px) and (max-width: 1240px) { .nav ul { gap: 20px; } .nav ul a { letter-spacing: 0.16em; } }

/* Network: punch line and what makes it different */
.nx-punch { margin-top: 22px; max-width: 820px; font-family: var(--serif); font-size: clamp(22px, 2.3vw, 29px); line-height: 1.3; color: var(--blue); }
.network .kicker { margin-top: 16px; }
.nx-why { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.nx-why > div { padding: 22px 28px 24px 0; }
.nx-why > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.nx-why span { font-family: var(--serif); font-size: 15px; color: var(--blue); }
.nx-why b { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--ink); line-height: 1.25; }
.nx-why p { margin-top: 8px; font-size: 14px; color: var(--grey); line-height: 1.55; }
.net-note b { font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--ink); }
@media (max-width: 820px) {
  .nx-why { grid-template-columns: 1fr; }
  .nx-why > div, .nx-why > div + div { padding: 18px 0; border-left: 0; }
  .nx-why > div + div { border-top: 1px solid var(--line); }
}@media (max-width: 1240px) {
  .netx { grid-template-columns: 1fr; gap: 40px; }
  .nx-objs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .nx-objs .nx-head, .nx-objs .tour-btn { grid-column: 1 / -1; }
}
@media (max-width: 720px) { .nx-objs { grid-template-columns: 1fr; } }
.nx-orph b, .nx-client b { overflow-wrap: break-word; hyphens: auto; }
.nx-objs .tour-btn { justify-self: start; }

/* ============ College Why now: diagram with explanation beside it ============ */
.mf-wrap { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: stretch; }
.mf-wrap .mflow { margin-top: 0; gap: 0 clamp(36px, 4vw, 60px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); }
.mf-wrap .mf-item { font-size: 14px; padding: 11px 13px; }
.mf-cap { margin-top: 0; padding: 26px 26px 22px; border-top: 0; border-radius: 14px; background: var(--navy); color: var(--on-dark); display: flex; flex-direction: column; min-height: 0; box-shadow: 0 24px 50px rgba(30,39,52,0.18); grid-template-columns: none; }
.mf-cap .where { color: var(--blue-soft); }
.mf-cap h3 { color: var(--white); margin-top: 8px; font-size: 24px; }
.cap-row { margin-top: 14px; padding: 12px 0 0 14px; border-left: 2px solid rgba(143,176,218,0.35); }
.cap-row span { display: block; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--blue-soft); }
.cap-row p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--on-dark); }
.cap-row.ad { border-left-color: var(--blue-soft); }
.cap-row.ad p { font-family: var(--serif); font-size: 17px; color: var(--white); }
.cap-row.va { border-left-color: #6FA3E6; background: rgba(31,95,168,0.28); padding: 12px 14px; border-radius: 0 8px 8px 0; }
.cap-row.va p { font-family: var(--serif); font-size: 17px; color: var(--white); }
.mf-cap .tour-host { margin-top: auto; padding-top: 16px; }
.mf-cap .tour-btn { color: var(--blue-soft); border-color: rgba(143,176,218,0.4); margin-top: 0; }
.mf-cap .cap-body.fade { animation: panelIn .45s ease; }
.mflow .mf-item.on { background: var(--navy); color: var(--white); border-color: var(--navy); box-shadow: 0 0 0 4px rgba(31,95,168,0.2); }
.mflow .mf-item.dashed.on { background: var(--navy); color: var(--white); }
.mflow.has-sel .mf-item:not(.on) { opacity: 0.7; }
@media (max-width: 1100px) {
  .mf-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .mf-col > .mf-cap, .mf-mid > .mf-cap { grid-column: 1 / -1; margin: 6px 0 10px; }
}

/* ============ Return on your revenue: one payment, followed through ============ */
.demo { margin-top: 40px; border-radius: 16px; background: linear-gradient(135deg, var(--navy) 0%, #22324A 100%); color: var(--on-dark); padding: 34px 36px 30px; position: relative; overflow: hidden; }
.demo::after { content: ""; position: absolute; right: -180px; top: -200px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(31,95,168,0.4), rgba(31,95,168,0) 65%); pointer-events: none; }
.demo-head { position: relative; z-index: 1; max-width: 720px; }
.demo-head .label { color: var(--blue-soft); }
.demo-head h3 { margin-top: 10px; font-size: clamp(24px, 2.5vw, 32px); color: var(--white); }
.demo-head p:not(.label) { margin-top: 10px; font-size: 16px; color: var(--on-dark); }
.demo-track { position: relative; z-index: 1; list-style: none; margin-top: 34px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.demo-track::before { content: ""; position: absolute; left: 10px; right: 10px; top: 13px; height: 2px; background: rgba(143,176,218,0.25); }
.demo-track::after { content: ""; position: absolute; left: 4px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: #DCE8F8; box-shadow: 0 0 0 6px rgba(143,176,218,0.25), 0 0 18px rgba(143,176,218,0.9); animation: demoDot 12.5s ease-in-out infinite; }
@keyframes demoDot { 0% { left: 4px; opacity: 0; } 4% { opacity: 1; } 84% { left: calc(100% - 18px); opacity: 1; } 92%, 100% { left: calc(100% - 18px); opacity: 0; } }
.demo-track li { position: relative; padding-top: 38px; transition: opacity .4s; animation: demoStep 12.5s ease-in-out infinite; opacity: .45; }
.demo-track li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--navy); border: 2px solid var(--blue-soft); }
.demo-track li:nth-child(2) { animation-delay: 2.1s; } .demo-track li:nth-child(3) { animation-delay: 4.2s; } .demo-track li:nth-child(4) { animation-delay: 6.3s; } .demo-track li:nth-child(5) { animation-delay: 8.4s; }
@keyframes demoStep { 0%, 100% { opacity: .45; } 4%, 30% { opacity: 1; } 40% { opacity: .45; } }
.demo-track .k { font-family: var(--serif); font-size: 14px; color: var(--blue-soft); }
.demo-track b { display: block; margin-top: 4px; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.3; color: var(--white); }
.demo-track p { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--on-dark); }
.demo-value { position: relative; z-index: 1; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.demo-value span { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--blue-soft); margin-right: 8px; }
.demo-value i { font-style: normal; font-size: 14px; padding: 6px 14px; border-radius: 999px; background: var(--blue); color: var(--white); }
@media (max-width: 900px) {
  .demo { padding: 26px 22px; }
  .demo-track { grid-template-columns: 1fr; gap: 6px; }
  .demo-track::before { left: 10px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; }
  .demo-track::after { display: none; }
  .demo-track li { padding: 4px 0 10px 36px; }
  .demo-track li::before { top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .demo-track li, .demo-track::after { animation: none; opacity: 1; } }

/* ============ Every dollar: receipts across the year ============ */
.yearviz .rcpt circle { fill: #DCE8F8; stroke: rgba(143,176,218,0.5); stroke-width: 6; animation: rcptPulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.yearviz .rcpt circle:nth-child(2) { animation-delay: .6s; } .yearviz .rcpt circle:nth-child(3) { animation-delay: 1.2s; } .yearviz .rcpt circle:nth-child(4) { animation-delay: 1.8s; } .yearviz .rcpt circle:nth-child(5) { animation-delay: 2.4s; }
@keyframes rcptPulse { 0%, 100% { stroke-opacity: .2; } 50% { stroke-opacity: .7; } }
.yearviz .coin circle { fill: #DCE8F8; filter: drop-shadow(0 0 4px rgba(143,176,218,0.9)); }
@media (prefers-reduced-motion: reduce) { .yearviz .coin { display: none; } .yearviz .rcpt circle { animation: none; } }

/* ============ What the value can fund ============ */
.fund { margin-top: 30px; }
.fund-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fund-grid > div { padding: 18px 18px 20px; border-radius: 10px; background: var(--mist); border-top: 3px solid var(--blue); }
.fund-grid b { display: block; font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--ink); line-height: 1.3; }
.fund-grid p { margin-top: 6px; font-size: 14px; color: var(--grey); line-height: 1.5; }
.fund-note { margin-top: 10px; font-size: 13px; color: var(--grey-2); }
@media (max-width: 1000px) { .fund-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fund-grid { grid-template-columns: 1fr; } }

/* How we work: deliverable is the headline outcome of each stage */
.stage > .deliv { font-size: 17px; }
/* ============ Round 11: roles, destination band, shorter services, advisory band ============ */
/* No hyphenation in the network boxes ("coordinated" stays whole) */
.nx-orph b, .nx-client b, .network h2, .nx-punch { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }

/* Orpheon's role: a short list of functions */
.cap-row.ad ul { list-style: none; margin-top: 6px; }
.cap-row.ad li { position: relative; padding: 3px 0 3px 16px; font-size: 14px; line-height: 1.45; color: var(--white); }
.cap-row.ad li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--blue-soft); }

/* What this makes possible: the destination of the value above */
.dest { position: relative; margin-top: 28px; border-radius: 16px; background: linear-gradient(120deg, #1F5FA8 0%, #1B4F8C 55%, #1E2734 100%); color: #DCE8F8; padding: 30px 32px 24px; overflow: hidden; }
.dest::before { content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(220,232,248,0.18); box-shadow: 0 0 0 60px rgba(220,232,248,0.04), 0 0 0 120px rgba(220,232,248,0.03); pointer-events: none; }
.dest-head { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.dest-head .label { color: var(--white); font-size: 12px; }
.dest-sub { font-size: 14px; color: #C7D8EF; }
.dest-arrow { position: absolute; left: 50%; top: -58px; width: 2px; height: 34px; background: repeating-linear-gradient(to bottom, #8FB0DA 0 4px, transparent 4px 9px); background-size: 2px 9px; animation: plFlow 1s linear infinite; }
.dest-grid { position: relative; margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dest-grid > div { padding: 20px 20px 22px; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(220,232,248,0.18); transition: background .4s, border-color .4s, transform .4s, box-shadow .4s; }
.dest-grid .k { font-family: var(--serif); font-size: 15px; color: #8FB0DA; }
.dest-grid b { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--white); }
.dest-grid p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: #C7D8EF; }
.dest-grid > div.lit { background: var(--white); border-color: var(--white); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(10,20,40,0.35); }
.dest-grid > div.lit .k { color: var(--blue); }
.dest-grid > div.lit b { color: var(--ink); }
.dest-grid > div.lit p { color: var(--grey); }
.dest .fund-note { position: relative; color: #9FB5D3; margin-top: 14px; }
@keyframes plFlow { to { background-position: 0 12px; } }
@media (max-width: 900px) { .dest-grid { grid-template-columns: 1fr; } .dest { padding: 24px 20px; } .dest-arrow { display: none; } }

/* What we do: one outcome, three activities, one benefit */
.acc-item .detail .lead-d { font-size: clamp(22px, 2vw, 26px); }
.acc-item .acts { list-style: none; margin-top: 18px; max-width: 560px; }
.acc-item .acts li { position: relative; padding: 7px 0 7px 22px; font-size: 15px; color: var(--on-dark); border-top: 1px solid var(--line-dark); }
.acc-item .acts li:first-child { border-top: 0; }
.acc-item .acts li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 10px; height: 2px; background: var(--blue-soft); }
.acc { min-height: 400px; }

/* One Orpheon advisory band spanning all three */
.advband { position: relative; margin-top: 14px; display: grid; grid-template-columns: 240px 1fr; align-items: stretch; border-radius: 12px; background: var(--navy); overflow: hidden; }
.advband::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--blue), #8FB0DA, var(--blue)); background-size: 200% 100%; animation: bandSweep 6s linear infinite; }
@keyframes bandSweep { to { background-position: -200% 0; } }
.ab-head { padding: 22px 26px; border-right: 1px solid var(--line-dark); display: flex; flex-direction: column; justify-content: center; }
.ab-head span { font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--blue-soft); }
.ab-head b { margin-top: 4px; font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--white); line-height: 1.25; }
.advband ol { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.advband li { padding: 22px 22px; position: relative; }
.advband li + li { border-left: 1px solid var(--line-dark); }
.advband li b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--white); }
.advband li span { font-size: 13px; color: var(--on-dark); }
@media (max-width: 900px) { .advband { grid-template-columns: 1fr; } .ab-head { border-right: 0; border-bottom: 1px solid var(--line-dark); } .advband ol { grid-template-columns: 1fr 1fr; } .advband li:nth-child(3) { border-left: 0; } .advband li:nth-child(n+3) { border-top: 1px solid var(--line-dark); } }
@media (prefers-reduced-motion: reduce) { .advband::before, .dest-arrow { animation: none; } }

/* Network foot: open architecture and sport's realities */
.net-foot { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ink); }
.net-foot > div { padding: 22px 32px 6px 0; }
.net-foot > div + div { padding-left: 32px; border-left: 1px solid var(--line); }
.net-foot .nf-title { font-family: var(--serif); font-size: 22px; color: var(--ink); line-height: 1.25; }
.net-foot p:not(.nf-title) { margin-top: 8px; font-size: 15px; color: var(--grey); line-height: 1.6; }
.net-foot + .net-note { margin-top: 22px; }
@media (max-width: 820px) { .net-foot { grid-template-columns: 1fr; } .net-foot > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }
/* ============ Round 12: smooth, steady transitions ============ */
/* What we do cards: fixed height, smooth width change, content fades in after */
@media (min-width: 821px) {
  .acc { height: 500px; min-height: 0; }
  .acc-item { transition: flex .9s cubic-bezier(.45,0,.2,1), background .7s ease, border-color .7s ease; }
  .acc-item .detail { max-height: none !important; overflow: visible; opacity: 0; transition: opacity .5s ease .45s; }
  .acc-item:not(.on) .detail { position: absolute; left: 28px; right: 28px; visibility: hidden; opacity: 0; transition: none; }
  .acc-item.on .detail { position: relative; visibility: visible; opacity: 1; }
  .acc-item h3, .acc-item .tagline { transition: color .6s ease; }
}
@media (max-width: 820px) {
  .acc-item:not(.on) .detail { display: none; }
  .acc-item.on .detail { max-height: none; opacity: 1; }
}

/* Panels keep a steady size, so switching never makes the page jump */


.sco-panel .fade, .mf-cap .cap-body.fade, .nx-client .fade { animation: softIn .7s ease both; }
@keyframes softIn { from { opacity: 0; } to { opacity: 1; } }

/* Gentler highlight changes */
.sco-node { transition: opacity .6s ease, transform .6s ease, background .7s ease, border-color .7s ease, box-shadow .7s ease, color .7s ease; }
.sco-stage .link { transition: stroke-dashoffset 1.3s ease, stroke .8s ease, stroke-width .8s ease, opacity .8s ease; }
.sco-stage .flow { transition: opacity .9s ease; }
.sco-stage .marker { transition: fill .8s ease, r .6s ease; }
.sco-stage .tie { transition: opacity .9s ease; }
.mf-item { transition: background .6s ease, color .6s ease, border-color .6s ease, box-shadow .6s ease, opacity .6s ease; }
.mf-lines .fl, .mf-lines .base { transition: opacity .7s ease, stroke .7s ease, stroke-width .7s ease; }
.nx-p, .nx-p i { transition: opacity .7s ease, background .7s ease, box-shadow .7s ease, border-color .7s ease; }
.nx-lines .base, .nx-lines .fl { transition: stroke .7s ease, stroke-width .7s ease, opacity .7s ease; }
.nx-obj { transition: background .6s ease, border-color .6s ease, box-shadow .6s ease; }

/* The light that travels around the Capital Office ring */
.sco-stage .runner { transform-box: view-box; transform-origin: 0 0; transition: transform 1.1s cubic-bezier(.45,0,.25,1); opacity: 0; }
.sco.drawn .sco-stage .runner { opacity: 1; transition: transform 1.1s cubic-bezier(.45,0,.25,1), opacity .8s ease 1s; }
.sco-stage .runner path { fill: none; stroke: #DCE8F8; stroke-linecap: round; }
.sco-stage .runner circle { fill: #FFFFFF; filter: drop-shadow(0 0 6px rgba(220,232,248,1)) drop-shadow(0 0 14px rgba(143,176,218,0.9)); }
@media (max-width: 720px) { .sco-stage .runner { display: none; } }
@media (prefers-reduced-motion: reduce) { .sco-stage .runner { transition: none; } }

/* Open architecture: the market, connected to one plan */
.net-foot { display: none; }
.oa { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: 24px 48px; padding: 34px 38px; border-radius: 16px; background: var(--navy); color: var(--on-dark); position: relative; overflow: hidden; }
.oa::before { content: ""; position: absolute; right: -140px; top: 50%; width: 520px; height: 520px; transform: translateY(-50%); background: radial-gradient(circle, rgba(31,95,168,0.4), rgba(31,95,168,0) 65%); pointer-events: none; }
.oa-copy { position: relative; }
.oa-copy .label { color: var(--blue-soft); }
.oa-copy h3 { margin-top: 10px; font-size: clamp(28px, 3vw, 38px); color: var(--white); line-height: 1.1; }
.oa-copy p:not(.label) { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--on-dark); }
.oa-vis { position: relative; }
.oa-vis svg { display: block; width: 100%; height: auto; overflow: visible; }
.oa-t { font-size: 10px; letter-spacing: 2.5px; fill: var(--blue-soft); }
.oa-dot circle { fill: rgba(143,176,218,0.35); transition: fill .7s ease, r .7s ease; }
.oa-dot text { font-size: 10.5px; fill: #DCE8F8; opacity: 0; transition: opacity .6s ease; }
.oa-dot.lit circle { fill: #DCE8F8; r: 6.5; filter: drop-shadow(0 0 6px rgba(143,176,218,0.9)); }
.oa-dot.lit text { opacity: 1; }
.oa-lines path { fill: none; stroke: #8FB0DA; stroke-width: 1.6; stroke-dasharray: 3 7; opacity: 0; transition: opacity .8s ease; animation: mfFlow 1.2s linear infinite; }
.oa-lines path.in { opacity: .9; }
.oa-lines path.out { opacity: 0; transition-delay: 0s !important; }
.oa-plan circle { fill: var(--blue); }
.oa-plan .halo { fill: none; stroke: rgba(143,176,218,0.4); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: pulseRing 3.2s ease-out infinite; }
.oa-plan text { font-size: 11px; letter-spacing: 2px; fill: var(--white); font-weight: 700; }
@media (max-width: 900px) { .oa { grid-template-columns: 1fr; padding: 26px 22px; } }
@media (prefers-reduced-motion: reduce) { .oa-lines path { animation: none; } .oa-plan .halo { animation: none; } }
/* Every dollar: yield flowing back */
.yearviz .yield-fill { transform-box: fill-box; transform-origin: left center; animation: yieldGrow 5s ease-in-out infinite; opacity: .9; }
@keyframes yieldGrow { 0% { transform: scaleX(.08); } 60%, 85% { transform: scaleX(1); } 100% { transform: scaleX(.08); } }
@media (prefers-reduced-motion: reduce) { .yearviz .yield-fill { animation: none; } }

/* What this makes possible: four outcomes, compounding */
.dest-head { align-items: center; flex-wrap: nowrap; gap: 16px; }
.dest-loop { width: 44px; height: 44px; flex: none; }
.dest-loop .spin { transform-box: view-box; transform-origin: 0 0; animation: spin 7s linear infinite; }
.dest-title { margin-top: 6px; font-family: var(--serif); font-size: clamp(19px, 1.9vw, 24px); line-height: 1.3; color: var(--white); }
.dest-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dest-grid b { font-size: 20px; }
@media (max-width: 1100px) { .dest-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .dest-grid { grid-template-columns: 1fr; } .dest-head { flex-wrap: wrap; } }

/* Panels size to their content and glide between sizes; the slot around them holds the space */
.sco-panel { transition: height .6s cubic-bezier(.4,0,.2,1); overflow: hidden; }
.mf-cap { transition: height .6s cubic-bezier(.4,0,.2,1); overflow: hidden; }
@media (min-width: 1101px) {
  .mf-wrap { align-items: start; }
  .mf-wrap .mflow { align-self: center; }
  .mf-cap { align-self: start; }
}
/* Open architecture: smooth lines, sparks and the client inside one plan */
.oa-lines path { animation: none; stroke-dasharray: 1; stroke-dashoffset: 1; stroke: #8FB0DA; stroke-width: 1.4; opacity: .75; transition: none; }
.oa-lines g { opacity: 1; transition: opacity 1.1s ease; }
.oa-lines g path { transition: stroke-dashoffset 1.4s cubic-bezier(.45,0,.2,1); transition-delay: inherit; }
.oa-lines g.in path { stroke-dashoffset: 0; }
.oa-lines g.out { opacity: 0; transition-delay: 0s !important; }
.oa-lines g .spark { fill: #FFFFFF; filter: drop-shadow(0 0 4px rgba(220,232,248,1)); opacity: 0; transition: opacity .8s ease 1.2s; }
.oa-lines g.in .spark { opacity: 1; }
.oa-dot circle { transition: fill 1s ease, r 1s ease; }
.oa-dot text { transition: opacity 1s ease; }
.oa-plan .ring { fill: none; stroke: #8FB0DA; stroke-width: 2; stroke-dasharray: 5 7; transform-box: fill-box; transform-origin: center; animation: spin 24s linear infinite; }
.oa-plan .halo { fill: none; stroke: rgba(143,176,218,0.55); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: planPulse 4s ease-out infinite; }
.oa-plan .halo.h2 { animation-delay: 2s; }
@keyframes planPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } }
.oa-plan .core { fill: var(--blue); filter: drop-shadow(0 0 10px rgba(31,95,168,0.8)); }
.oa-plan .cl { font-size: 9.5px; letter-spacing: 1.6px; fill: var(--white); font-weight: 700; }
.oa-plan .plan-label { font-size: 10px; letter-spacing: 3px; fill: #DCE8F8; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .oa-plan .ring, .oa-plan .halo { animation: none; } .oa-lines g path { transition: none; stroke-dashoffset: 0; } }
/* Open architecture: calmer pace */
.oa-lines g { transition: opacity 1.6s ease; }
.oa-lines g path { transition: stroke-dashoffset 2.2s cubic-bezier(.45,0,.2,1); transition-delay: inherit; }
.oa-lines g .spark { transition: opacity 1.2s ease 2s; }
.oa-dot circle { transition: fill 1.6s ease, r 1.6s ease; }
.oa-dot text { transition: opacity 1.4s ease; }
/* ============ Partner network: refined visuals ============ */
/* Header row with the tour control */
.nx-headrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.nx-headrow .nx-head { margin-bottom: 0; }
.nx-headrow .tour-btn { margin: 0; color: var(--blue); border-color: var(--line); }
.nx-objs > .tour-btn { display: none; }

/* Objective cards: full text always visible; the active card turns navy */
.nx-objs { gap: 10px; }
.nx-obj { padding: 20px 64px 22px 58px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); overflow: hidden; transition: background .7s ease, border-color .7s ease, box-shadow .7s ease, transform .7s ease; }
.nx-obj::before { display: none; }
.nx-obj .n { left: 22px; top: 20px; font-size: 17px; color: var(--blue); transition: color .7s ease; }
.nx-obj b { font-size: 20px; transition: color .7s ease; }
.nx-obj p { color: var(--grey); transition: color .7s ease; }
.nx-obj:hover { border-color: var(--blue-soft); }
.nx-obj.on { background: var(--navy); border-color: var(--navy); box-shadow: 0 18px 38px rgba(30,39,52,0.22); transform: translateX(4px); }
.nx-obj.on .n { color: var(--blue-soft); }
.nx-obj.on b { color: var(--white); }
.nx-obj.on p { color: var(--on-dark); }
.nx-ic { position: absolute; right: 20px; top: 20px; width: 26px; height: 26px; fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .7s ease; }
.nx-obj.on .nx-ic { stroke: #8FB0DA; }
.nx-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nx-pills i { font-style: normal; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--blue-tint); color: var(--ink); transition: background .7s ease, color .7s ease; }
.nx-pills i::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.nx-obj.on .nx-pills i { background: rgba(143,176,218,0.16); color: var(--white); }
.nx-obj.on .nx-pills i::before { background: #8FB0DA; box-shadow: 0 0 6px rgba(143,176,218,0.9); }
.nx-o { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 16px; line-height: 1.35; color: var(--ink); transition: color .7s ease, border-color .7s ease; }
.nx-o small { display: block; font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--blue); margin-bottom: 3px; }
.nx-obj.on .nx-o { color: var(--white); border-top-color: var(--line-dark); }
.nx-obj.on .nx-o small { color: var(--blue-soft); }
.nx-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #3A7FCC, #8FB0DA); transform: scaleX(0); transform-origin: left; opacity: 0; }
.netx.touring:not(.held) .nx-obj.on .nx-bar { opacity: 1; animation: nxBar 7s linear forwards; }
@keyframes nxBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Orpheon and the client as circles, matching the rest of the site */
.nx-orph, .nx-client { background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0; width: auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.nx-disc { position: relative; width: 132px; height: 132px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nx-orph .nx-disc { background: var(--navy); box-shadow: 0 16px 34px rgba(30,39,52,0.25); }
.nx-orph .nx-disc span { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--blue-soft); }
.nx-orph .nx-disc b { margin-top: 4px; font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--white); }
.nx-orph .orbit { position: absolute; inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px); overflow: visible; animation: spin 30s linear infinite; }
.nx-orph .orbit circle { fill: none; stroke: #8FB0DA; stroke-width: 1.2; stroke-dasharray: 3 6; opacity: .8; }
.nx-cap { margin-top: 26px; font-family: var(--serif); font-size: 16px; color: var(--ink); line-height: 1.3; }
.nx-client .nx-disc { background: var(--blue); box-shadow: 0 0 22px rgba(31,95,168,0.45); }
.nx-client .nx-disc span { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--white); font-weight: 700; position: relative; }
.nx-client .halo { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(31,95,168,0.5); animation: nxHalo 4s ease-out infinite; }
.nx-client .halo.h2 { animation-delay: 2s; }
@keyframes nxHalo { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
.nx-cap-label { margin-top: 26px; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--blue); }
.nx-client .nx-out { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.3; color: var(--ink); max-width: 200px; }

/* The specialists on one spine */
.nx-partners { position: relative; }
.nx-partners::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: linear-gradient(to bottom, rgba(143,176,218,0.15), rgba(143,176,218,0.6), rgba(143,176,218,0.15)); }
.nx-p i { position: relative; z-index: 1; background: var(--mist); }
.nx-p.on i { box-shadow: 0 0 0 5px rgba(31,95,168,0.16), 0 0 12px rgba(31,95,168,0.55); }

/* Active paths carry sparks; inactive ones sit further back */
.nx-lines .base { stroke: #D6DDE7; }
.nx-lines g:not(.on) .base { opacity: .7; }
.nx-lines .spark { fill: #1F5FA8; opacity: 0; transition: opacity .8s ease; filter: drop-shadow(0 0 4px rgba(31,95,168,0.8)); }
.nx-lines g.on .spark { opacity: 1; }

/* Open architecture footer line inside the section rhythm */
.net-note { text-align: center; border-top: 0; padding-top: 0; margin-top: 26px; }

@media (max-width: 720px) {
  .nx-obj { padding: 18px 54px 20px 50px; }
  .nx-obj .n { left: 18px; }
  .nx-disc { width: 110px; height: 110px; }
  .nx-partners::before { display: none; }
  .nx-client .nx-out { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .nx-orph .orbit, .nx-client .halo { animation: none; } }
.oa-foot { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; border-top: 1px solid var(--line-dark); }
.oa-foot > div { padding: 18px 20px 2px 0; }
.oa-foot > div + div { padding-left: 22px; border-left: 1px solid var(--line-dark); }
.oa-foot b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--white); }
.oa-foot span { display: block; margin-top: 4px; font-size: 13px; color: var(--on-dark); }
@media (max-width: 720px) { .oa-foot { grid-template-columns: 1fr; } .oa-foot > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-dark); } }
/* Wider objectives; the map stays in view alongside them */
@media (min-width: 1241px) {
  .netx { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; }
  .nx-map { position: sticky; top: 110px; gap: 0 70px; }
}
/* ============ Rebalance: the map leads, cards stay light, the client stays put ============ */
@media (min-width: 1241px) {
  .netx { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.5fr); gap: 44px; align-items: center; }
  .nx-map { position: relative; top: auto; gap: 0 84px; }
}
.nx-objs { gap: 6px; }
.nx-obj { padding: 14px 18px 16px 50px; border-radius: 10px; transform: none !important; }
.nx-obj .n { left: 18px; top: 15px; font-size: 15px; }
.nx-obj b { font-size: 18px; }
.nx-obj em { display: block; margin-top: 5px; font-style: normal; font-size: 12px; letter-spacing: 0.03em; color: var(--blue); transition: color .7s ease; }
.nx-obj.on em { color: var(--blue-soft); }
.nx-obj p { margin-top: 5px; font-size: 13.5px; line-height: 1.5; }
.nx-obj.on { box-shadow: 0 12px 26px rgba(30,39,52,0.18); }
.netx.touring:not(.held) .nx-obj.on .nx-bar { animation-duration: 7s; }

/* The client circle holds its place; the outcome sits beneath without moving it */
.nx-client { position: relative; }
.nx-client .nx-cap-label, .nx-client .nx-out { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; }
.nx-client .nx-cap-label { top: calc(100% + 16px); margin: 0; white-space: nowrap; }
.nx-client .nx-out { top: calc(100% + 36px); margin: 0; width: 220px; max-width: 220px; }
.nx-orph { position: relative; }
.nx-orph .nx-cap { position: absolute; top: calc(100% + 26px); left: 50%; transform: translateX(-50%); margin: 0; width: 180px; }
@media (max-width: 720px) {
  .nx-client .nx-cap-label, .nx-client .nx-out, .nx-orph .nx-cap { position: static; transform: none; width: auto; max-width: none; }
  .nx-client .nx-cap-label { margin-top: 16px; }
  .nx-orph .nx-cap { margin-top: 18px; }
}
/* Compact specialist pills on the objective cards */
.nx-pills { gap: 5px; margin-top: 7px; }
.nx-pills i { font-size: 11.5px; padding: 3px 9px 3px 7px; gap: 5px; white-space: nowrap; }
.nx-pills i::before { width: 6px; height: 6px; }
.nx-orph .nx-disc b { margin-top: 0; font-size: 21px; letter-spacing: 0.01em; }

/* What this makes possible: calm, flat, four clear outcomes */
.payoff { margin-top: 28px; border-radius: 14px; background: var(--navy); color: var(--on-dark); padding: 30px 34px 22px; }
.payoff-head .label { color: var(--blue-soft); }
.payoff-title { margin-top: 8px; font-family: var(--serif); font-size: clamp(20px, 2vw, 25px); line-height: 1.3; color: var(--white); max-width: 760px; }
.payoff-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.payoff-grid > div { padding: 20px 22px 6px 0; }
.payoff-grid > div + div { padding-left: 22px; border-left: 1px solid var(--line-dark); }
.payoff-grid b { display: block; font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.3; color: var(--white); }
.payoff-grid p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--on-dark); }
.payoff-note { margin-top: 18px; font-size: 12.5px; color: var(--grey-2); }
@media (max-width: 1000px) {
  .payoff-grid { grid-template-columns: 1fr 1fr; }
  .payoff-grid > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .payoff-grid > div:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
}
@media (max-width: 620px) {
  .payoff { padding: 24px 20px 18px; }
  .payoff-grid { grid-template-columns: 1fr; }
  .payoff-grid > div, .payoff-grid > div + div { padding: 16px 0 6px; border-left: 0; }
  .payoff-grid > div + div { border-top: 1px solid var(--line-dark); }
}
/* What this makes possible: no panel, just four clear columns */
.payoff { margin-top: 48px; padding: 0; border-radius: 0; background: none; color: var(--body); }
.payoff-head .label { color: var(--blue); }
.payoff-title { margin-top: 10px; color: var(--ink); font-size: clamp(22px, 2.2vw, 28px); }
.payoff-grid { margin-top: 26px; border-top: 0; gap: 0 36px; }
.payoff-grid > div, .payoff-grid > div + div { padding: 0; border-left: 0; }
.payoff-grid > div::before { content: ""; display: block; width: 32px; height: 2px; background: var(--blue); margin-bottom: 16px; }
.payoff-grid b { color: var(--ink); font-size: 19px; }
.payoff-grid p { color: var(--grey); font-size: 14.5px; }
@media (max-width: 1000px) {
  .payoff-grid { gap: 28px 32px; }
  .payoff-grid > div:nth-child(n+3) { border-top: 0; }
}
@media (max-width: 620px) {
  .payoff-grid > div + div { border-top: 0; padding-top: 0; }
}
.payoff + .levers-note { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--grey-2); }


/* ================= Round 15: subtraction pass ================= */
/* ===== Subtraction pass (proposal): fewer labels, one kind of card, hidden controls, calmer motion, more space ===== */

/* 1. More space between sections */
section { padding-top: clamp(96px, 11vw, 150px); padding-bottom: clamp(96px, 11vw, 150px); }
.sco-section { padding: clamp(84px, 9vw, 124px) 0; }

/* 3. One kind of card: one corner size, no shadows */
.nx-obj, .lever, .acc-item, .door, .mf-item, .mf-orph, .mf-core, .mf-cap, .col-card, .lever-stage, .oa, .demo, .stage { border-radius: 10px !important; }
.nx-obj.on, .mf-cap, .mflow .mf-item.on, .nx-orph .nx-disc, .nx-client .nx-disc, .door:hover, .acc-item.on, .sco-node.on { box-shadow: none !important; }
.nx-obj.on { transform: none !important; }
/* Tags inside panels become plain text lists */
.pane-foot .chips { gap: 0; }
.pane-foot .chip, .sco-panel .ex-chip { background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; font-size: 13.5px !important; color: #C7D8EF !important; }
.pane-foot .chip + .chip::before, .sco-panel .ex-chip + .ex-chip::before { content: "\00B7"; margin: 0 8px; color: var(--blue-soft); }
.sco-panel .ex { gap: 0 !important; }

/* 4. Hide the controls: tours still run, pause on hover and hold on click */
.tour-btn, .sco-hint, .hover-hint, .mf-hint, .acc-item .open-hint, .nx-bar, .lever .bar { display: none !important; }

/* 5. Calmer motion: remove pulses and decorative spinning */
.hero-rings .pulse, .sco-stage .pulse { display: none !important; }
.sco-stage svg > .rotor:not(.rev) { display: none !important; }
.sco-stage svg > .rotor.rev ~ .rotor.rev { display: none !important; }
.nx-orph .orbit { animation: none !important; }
.nx-client .halo, .oa-plan .halo { display: none !important; }
.oa-plan .ring { animation: none !important; }
.mf-loop .spin, .dest-loop .spin { animation: none !important; }
.viz .ring-p { display: none !important; }
.yearviz .rcpt circle { animation: none !important; }
.yearviz .yield-fill { animation: none !important; transform: none !important; }
/* Only the selected partner's line flows in the Capital Office */
.sco.drawn .flow { opacity: 0 !important; }
.sco .flow.on { opacity: .9 !important; }

/* Soft sparks */
.nx-lines .spark { r: 2px; fill: #8FB0DA !important; filter: none !important; }
.nx-lines g.on .spark { opacity: .75 !important; }
.oa-lines g .spark { r: 2.2px; fill: #C9D8EC !important; filter: none !important; }
.oa-lines g.in .spark { opacity: .7 !important; }
.yearviz .coin circle { filter: none !important; fill: #C9D8EC !important; }


/* ================= Round 16: ruled lists and still lines ================= */
/* ===== Proposal: ruled lists instead of cards, solid lines in Why now ===== */

/* ---- Homepage partner network objectives: a ruled list ---- */
.nx-objs { gap: 0 !important; }
.nx-obj {
  background: none !important; border: 0 !important; border-top: 1px solid var(--line) !important;
  border-radius: 0 !important; box-shadow: none !important; transform: none !important;
  padding: 20px 14px 22px 46px !important;
  transition: background .6s ease, padding .6s ease, box-shadow .6s ease !important;
}
.nx-objs .nx-obj:last-of-type { border-bottom: 1px solid var(--line) !important; }
.nx-obj .n { left: 6px !important; top: 21px !important; font-family: var(--serif); font-size: 15px !important; color: var(--blue) !important; }
.nx-obj.on {
  background: rgba(31,95,168,0.045) !important;
  box-shadow: inset 2px 0 0 var(--blue) !important;
  padding-left: 54px !important;
}
.nx-obj.on .n { left: 14px !important; }
.nx-obj.on b { color: var(--ink) !important; }
.nx-obj.on p { color: var(--grey) !important; }
.nx-obj:hover { background: rgba(31,95,168,0.03) !important; }

/* ---- College value tabs: the same ruled list beside the navy panel ---- */
.lever-list { gap: 0 !important; }
.lever {
  background: none !important; border: 0 !important; border-top: 1px solid var(--line) !important;
  border-radius: 0 !important; padding: 24px 14px 26px 46px !important;
  transition: background .6s ease, padding .6s ease, box-shadow .6s ease !important;
}
.lever-list .lever:last-child { border-bottom: 1px solid var(--line) !important; }
.lever .num { position: absolute; left: 6px; top: 27px; color: var(--blue) !important; }
.lever h3 { margin-top: 0 !important; color: var(--ink) !important; }
.lever p { color: var(--grey) !important; }
.lever.on {
  background: rgba(31,95,168,0.045) !important;
  box-shadow: inset 2px 0 0 var(--blue) !important;
  padding-left: 54px !important;
}
.lever.on .num { left: 14px; }
.lever:hover { background: rgba(31,95,168,0.03) !important; }

/* ---- College Why now: boxes stay; lines are still, solid blue on the selected stream ---- */
.mf-lines .fl { animation: none !important; stroke-dasharray: none !important; opacity: 0 !important; }
.mf-lines g.on .fl { opacity: 1 !important; stroke: var(--blue) !important; stroke-width: 2 !important; }
.mf-lines g.on .base { stroke: var(--blue) !important; }
.mf-loop svg { display: none !important; }
.mf-loop { justify-content: center; text-align: center; }

/* Value tabs: numeral sits beside the title */
.lever { display: grid !important; grid-template-columns: 34px 1fr; align-content: center; padding: 24px 14px 26px 10px !important; }
.lever.on { padding-left: 18px !important; }
.lever .num { position: static !important; grid-column: 1; grid-row: 1; padding-top: 5px; }
.lever h3 { grid-column: 2; grid-row: 1; }
.lever p { grid-column: 2; grid-row: 2; }
/* Selection shown only by the line: no fill, no box */
.nx-obj.on, .lever.on, .nx-obj:hover, .lever:hover { background: none !important; }
.nx-obj.on, .lever.on { border-top-color: var(--blue) !important; box-shadow: inset 0 1px 0 var(--blue) !important; }
.nx-obj:hover:not(.on), .lever:hover:not(.on) { border-top-color: var(--blue-soft) !important; }
.nx-obj.on { padding-left: 46px !important; }
.nx-obj.on .n { left: 6px !important; }
.lever.on { padding-left: 10px !important; }
.nx-obj.on b, .lever.on h3 { color: var(--blue) !important; }
.nx-obj b, .lever h3 { transition: color .6s ease, transform .6s ease; }
.nx-obj:hover b, .lever:hover h3, .nx-obj.on b, .lever.on h3 { transform: translateX(4px); }
/* ===== Smoothness: every state change eases, nothing snaps ===== */
.nx-obj, .lever { transition: border-color .6s ease, box-shadow .6s ease !important; }
.nx-obj b, .nx-obj em, .nx-obj p, .nx-obj .n, .lever h3, .lever p, .lever .num { transition: color .6s ease, transform .6s cubic-bezier(.4,0,.2,1) !important; }
.mf-lines .base { transition: stroke .6s ease, stroke-width .6s ease !important; }
.mf-lines .fl { transition: opacity .6s ease !important; }
.mf-item { transition: background .6s ease, color .6s ease, border-color .6s ease, box-shadow .6s ease, opacity .6s ease !important; }
.nx-obj.on em { color: var(--blue) !important; }
/* Why now panel: challenge, a fine rule, then the impact as the prominent line */
.mf-cap .cap-row { border-left: 0 !important; background: none !important; padding: 0 !important; border-radius: 0 !important; }
.mf-cap .cap-row.ch { margin-top: 18px; }
.mf-cap .cap-row.ch p { font-size: 15px; line-height: 1.55; color: var(--on-dark); }
.mf-cap .cap-row.im { margin-top: 20px; padding-top: 18px !important; border-top: 1px solid var(--line-dark); }
.mf-cap .cap-row.im p { margin-top: 6px; font-family: var(--serif); font-size: 21px; line-height: 1.35; color: var(--white); }
/* ===== Walkthrough: marker and steps on one clock ===== */
.demo-track::after { display: none !important; }
.demo-track li { animation: none !important; opacity: .42; transition: opacity .6s ease; }
.demo-track li.done { opacity: .75; }
.demo-track li.lit { opacity: 1; }
.demo-track li::before { transition: background .5s ease, border-color .5s ease, box-shadow .5s ease; }
.demo-track li.lit::before, .demo-track li.done::before { background: #8FB0DA; border-color: #DCE8F8; }
.demo-dot { position: absolute; top: 7px; left: 4px; width: 14px; height: 14px; border-radius: 50%; background: #DCE8F8; box-shadow: 0 0 0 5px rgba(143,176,218,0.22), 0 0 14px rgba(143,176,218,0.8); opacity: 0; z-index: 2; pointer-events: none; }
@media (max-width: 900px) { .demo-dot { display: none; } .demo-track li { opacity: 1; } }
.demo { margin-top: 44px; }

/* ===== Capital Office: the panel starts level with the top of the outer ring, on both pages ===== */
@media (min-width: 1001px) {
  .sco { align-items: start; }
  .sco > div:last-child { padding-top: clamp(14px, 1.6vw, 24px); }
}

/* ============ The Firm page ============ */
.firm-hero { min-height: 62vh; min-height: 62svh; padding: 150px 0 90px; }
.firm-hero h1.long { max-width: 16ch; }
.firm-body { padding-top: clamp(40px, 5vw, 70px); padding-bottom: clamp(70px, 8vw, 110px); }
.firm-sec { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 24px 72px; padding: clamp(44px, 5vw, 68px) 0; border-top: 1px solid var(--line); }
.firm-sec:first-child { border-top: 0; }
.firm-sec h2 { font-size: clamp(26px, 2.7vw, 36px); line-height: 1.15; margin-top: 0; max-width: 14ch; }
.firm-copy p { font-size: 18px; line-height: 1.75; color: var(--body); max-width: 660px; }
.firm-copy p + p { margin-top: 20px; }
.firm-copy .firm-span { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 18px; line-height: 1.7; color: var(--ink); }
.firm-span span { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.firm-link { display: inline-block; margin-top: 26px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue); border-bottom: 1px solid var(--blue-soft); padding-bottom: 4px; transition: color .3s, border-color .3s; }
.firm-link:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 900px) { .firm-sec { grid-template-columns: 1fr; gap: 16px; } .firm-sec h2 { max-width: none; } }
.firm-link { margin-top: 28px; }
@media (max-width: 900px) {
  .firm-hero { min-height: 0; padding: 128px 0 56px; }
  .firm-sec { padding: 36px 0; }
  .firm-copy p { font-size: 17px; line-height: 1.7; }
}
/* Homepage pointer to The Firm */
.owned .firm-link { color: var(--blue-soft); border-color: rgba(143,176,218,0.5); }
.owned .firm-link:hover { color: var(--white); border-color: var(--white); }

/* ============ Round 18: who we serve as a ruled list; relationship band; closing section ============ */
.serve-list { margin-top: 44px; border-top: 1px solid var(--ink); }
.serve-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 16px 72px; padding: 34px 0; border-bottom: 1px solid var(--line); transition: border-color .6s ease; }
.serve-row h3 { font-size: clamp(22px, 2.3vw, 29px); line-height: 1.2; transition: color .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.sr-h span { display: block; margin-top: 8px; font-size: 13px; letter-spacing: 0.02em; color: var(--blue); line-height: 1.5; max-width: 300px; }
.sr-p p { font-size: 17px; line-height: 1.7; color: var(--body); max-width: 640px; }
.serve-row .go { display: inline-block; margin-top: 16px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue); }
a.serve-row:hover { border-bottom-color: var(--blue); }
a.serve-row:hover h3 { color: var(--blue); transform: translateX(4px); }
.serve-firms { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 12px 72px; padding-top: 34px; }
.serve-firms .label { padding-top: 5px; }
.serve-firms p:not(.label) { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--ink); max-width: 640px; }

/* Relationship band: white, a fine top rule and quiet separators */
.advband.rel { grid-template-columns: 270px 1fr; background: none; border-radius: 0 !important; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-top: 22px; overflow: visible; }
.advband.rel::before { display: none; }
.advband.rel .ab-head { padding-left: 0; border-right-color: var(--line); }
.advband.rel .ab-head span { color: var(--blue); }
.advband.rel .ab-head b, .advband.rel li b { color: var(--ink); }
.advband.rel li span { display: block; margin-top: 4px; line-height: 1.45; color: var(--grey); }
.advband.rel li + li { border-left-color: var(--line); }

/* Closing section */
.owned .owned-line { font-family: var(--serif); font-size: 21px !important; line-height: 1.5; color: var(--white); margin-top: 16px !important; max-width: 440px; }

@media (max-width: 900px) {
  .serve-row, .serve-firms { grid-template-columns: 1fr; gap: 10px; }
  .serve-row { padding: 26px 0; }
  .advband.rel { grid-template-columns: 1fr; }
  .advband.rel .ab-head { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 0; }
  .advband.rel li { padding-left: 0; }
  .advband.rel li:nth-child(n+3) { border-top-color: var(--line); }
  .advband.rel li:nth-child(even) { padding-left: 18px; }
}
@media (min-width: 821px) { .acc { height: 430px; } }

/* Collapsed service cards show a small, consistent cue that they open */
.acc-item:not(.on) .open-hint { display: block !important; margin-top: 0; padding-top: 14px; }
.acc-item.on .open-hint { display: none !important; }

/* ============ Phone fixes ============ */
@media (max-width: 900px) {
  /* Why now: stack the diagram (the desktop side-by-side rule was overriding this) */
  .mf-wrap .mflow { grid-template-columns: 1fr; gap: 0; }
  .mf-wrap .mf-item { font-size: 14px; padding: 11px 12px; }
  .mf-wrap { gap: 22px; }
  .mf-cap { min-height: 0 !important; }
}
@media (max-width: 820px) {
  /* Value diagrams: keep them readable; swipe sideways to see the whole diagram */
  .pane { overflow: hidden; }
  .pane .viz-scroll, .pane > svg.viz { display: block; }
  .lever-stage { padding: 24px 18px 22px; }
  .pane > svg.viz { min-width: 560px; }
  .pane { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pane > *:not(svg) { position: sticky; left: 0; max-width: calc(100vw - 2 * var(--gutter) - 36px); }
  /* Closed service cards: space above the divider */
  .acc-item .outcome { margin-top: 18px; }
}
@media (max-width: 900px) {
  /* Open architecture: larger labels in the small diagram */
  .oa-dot text { font-size: 17px; }
  .oa-t { font-size: 15px; }
  .oa-plan .cl { font-size: 13px; }
  .oa-plan .plan-label { font-size: 14px; }
}
@media (max-width: 820px) {
  .pane > svg.viz + .steps3::before { content: "Swipe the diagram to see it all \2192"; display: block; font-size: 12px; letter-spacing: 0.04em; color: var(--blue-soft); padding: 10px 0 14px; }
}
/* ============ Round 20: who we serve as a concise audience index; phone fixes ============ */
#who-we-serve { padding-top: clamp(80px, 8vw, 112px); padding-bottom: clamp(80px, 8vw, 112px); }
.serve-intro { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--grey); max-width: 560px; }
.serve-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.si-col { padding: 28px 28px 32px; border-left: 1px solid var(--line); }
.si-col:first-child { border-left: 0; padding-left: 0; }
.si-col .n { display: block; font-family: var(--serif); font-size: 15px; color: var(--blue); }
.si-col h3 { margin-top: 18px; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.25; }
.si-col p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--grey); }
.si-col .go { display: inline-block; margin-top: 18px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue); transition: transform .6s cubic-bezier(.4,0,.2,1); }
.si-col .go:hover { transform: translateX(4px); }
#who-we-serve .serve-firms { padding-top: 28px; }
@media (max-width: 900px) {
  .serve-index { grid-template-columns: 1fr; margin-top: 36px; border-bottom: 0; }
  .si-col, .si-col:first-child { display: grid; grid-template-columns: 34px 1fr; padding: 20px 0 22px; border-left: 0; border-bottom: 1px solid var(--line); }
  .si-col .n { grid-row: 1 / span 3; padding-top: 4px; }
  .si-col h3 { margin-top: 0; font-size: 20px; }
  .si-col p { margin-top: 6px; }
  .si-col .go { margin-top: 12px; }
}

/* Phone: capability selector sits above the explanation it changes */
@media (max-width: 720px) {
  .sco > div:last-child { display: flex; flex-direction: column; }
  .sco > div:last-child > .sco-list { order: -1; margin-bottom: 20px; }
}
/* Phone: partner descriptions stay readable; selected partners in blue */
@media (max-width: 720px) {
  .nx-p.dim { opacity: 0.7; }
  .nx-p b { transition: color .7s ease; }
  .nx-p.on b { color: var(--blue); }
}
@media (min-width: 901px) {
  #who-we-serve .serve-firms { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  #who-we-serve .serve-firms p:not(.label) { grid-column: 2 / span 3; padding-left: 28px; max-width: 720px; }
}
@media (max-width: 900px) { .mf-cap .tour-host { display: none; } }

/* Round 20b: tighter audience index; phone reflows the same system; Why now panel stable */
#who-we-serve { padding-top: clamp(72px, 7vw, 96px); padding-bottom: clamp(64px, 6vw, 84px); }
.serve-index { margin-top: 36px; }
.si-col { padding-top: 24px; padding-bottom: 26px; }
#who-we-serve .serve-firms { padding-top: 22px; }
#who-we-serve .serve-firms p:not(.label) { font-size: 17px; line-height: 1.55; }
@media (max-width: 900px) {
  .serve-intro { font-size: 16px; }
  .serve-index { margin-top: 28px; }
  .si-col, .si-col:first-child { display: block; padding: 18px 0 20px; }
  .si-col .n { font-size: 14px; padding-top: 0; }
  .si-col h3 { margin-top: 8px; font-size: 20px; }
  .si-col p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; }
  .si-col .go { margin-top: 10px; font-size: 11px; }
  #who-we-serve .serve-firms { gap: 6px; padding-top: 20px; }
  #who-we-serve .serve-firms p:not(.label) { font-size: 16px; line-height: 1.55; }
  .mf-cap .cap-body.fade { animation: none !important; }
}
@media (max-width: 720px) { .nx-p.dim { opacity: 0.88; } }
@media (max-width: 900px) { .mflow .mf-item { transition: opacity .3s ease !important; } }

/* ============ Round 21: one section at a time. Tighter sections, alternating grounds, a clear opener ============ */
section { padding-top: clamp(72px, 8vw, 112px); padding-bottom: clamp(72px, 8vw, 112px); }
/* Each section opens with a short rule above its label */
main > section:not(.hero) > .wrap > .label:first-child::before { content: ""; display: block; width: 32px; height: 1px; background: currentColor; margin-bottom: 18px; }
/* Two dark sections never meet without a line */
.hero + .dark { border-top: 1px solid var(--line-dark); }
/* Homepage closing section on white, so it separates from the contact band */
.owned { background: var(--white); color: var(--body); }
.owned .label { color: var(--blue); }
.owned h3, .owned .owned-line { color: var(--ink) !important; }
.owned p:not(.label) { color: var(--grey); }
.owned .grid > div + div { border-left-color: var(--line); }
.owned .firm-link { color: var(--blue); border-color: rgba(31,95,168,0.4); }
.owned .firm-link:hover { color: var(--ink); border-color: var(--ink); }

/* College Why now: heading and context side by side, then the diagram */
/* Heading with the paragraph beneath it, as before */
.mf-mid { justify-content: center; }
/* College value on mist; Return on your revenue sits directly on navy; outcomes on white */
#value { background: var(--mist); }
.demo-section .demo { margin: 0; padding: 0; background: none; border-radius: 0 !important; overflow: visible; }
.demo-section .demo::before, .demo-section .demo::after { display: none; }
.payoff-section .payoff { margin-top: 0; }
@media (max-width: 900px) {
  .intro2 { grid-template-columns: 1fr; }
  .intro2 .kicker { margin-top: 18px; }
}
@media (max-width: 720px) {
  .owned .grid > div + div { border-top-color: var(--line); }
}

/* Round 21: section openers inside the split college sections */
.demo-head .label::before, .payoff-head .label::before { content: ""; display: block; width: 32px; height: 1px; background: currentColor; margin-bottom: 18px; }
/* Phone versions of the value diagrams: drawn for the narrow screen, no sideways swipe */
.viz-m { display: none !important; }
@media (max-width: 820px) {
  .pane > svg.viz:not(.viz-m) { display: none !important; }
  .pane > svg.viz-m { display: block !important; min-width: 0 !important; width: 100%; margin: 20px 0 6px; }
  .pane { overflow: visible !important; }
  .pane > *:not(svg) { position: static !important; max-width: none !important; }
  .pane > svg.viz + .steps3::before { content: none !important; display: none !important; }
}
/* Phone: How we work as one continuous line, stage to stage */
@media (max-width: 720px) {
  .stages { gap: 0 !important; margin-top: 36px; padding-left: 28px; }
  .stages::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 26px; width: 1px; background: var(--blue); }
  .stage { background: none !important; color: var(--body) !important; border-radius: 0 !important; padding: 0 0 28px !important; box-shadow: none !important; }
  .stage::before { content: ""; position: absolute; left: -27px; top: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--mist); border: 2px solid var(--blue); box-sizing: border-box; }
  .stage.st4::before { background: var(--blue); }
  .stage .gain { color: var(--blue) !important; border-bottom: 0 !important; padding-bottom: 0; margin-bottom: 6px; }
  .stage h3 { color: var(--ink) !important; font-size: 22px; }
  .stage p { color: var(--grey) !important; }
  .stage > .deliv { border-top: 1px solid var(--line) !important; color: var(--ink) !important; }
  .stage > .deliv span { color: var(--blue) !important; opacity: 1; }
  .throughout { background: none !important; border-radius: 0 !important; border-top: 1px solid var(--ink); margin-top: 0; padding: 16px 0 0; display: block; }
  .throughout b { display: block; color: var(--blue); font-weight: 400; margin-bottom: 6px; }
  .throughout span { color: var(--ink); font-family: var(--serif); font-size: 17px; }
}

/* Round 22: walkthrough steps can be picked; phone partner-network selector */
.demo-track li { cursor: pointer; }
.nx-detail { display: none; }
@media (max-width: 720px) {
  .nx-objs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 !important; }
  .nx-objs .nx-headrow { grid-column: 1 / -1; }
  .nx-objs .nx-obj, .nx-objs .nx-obj.on { padding: 14px 10px 14px 32px !important; border-top: 0 !important; border-bottom: 1px solid var(--line) !important; box-shadow: none !important; min-height: 76px; }
  .nx-objs .nx-obj:nth-of-type(odd) { border-right: 1px solid var(--line) !important; }
  .nx-objs .nx-obj:last-of-type { border-bottom: 1px solid var(--line) !important; }
  .nx-objs .nx-obj.on { box-shadow: inset 0 -2px 0 var(--blue) !important; }
  .nx-obj em, .nx-obj p { display: none !important; }
  .nx-obj b { font-size: 15px !important; line-height: 1.3; transform: none !important; }
  .nx-obj .n, .nx-obj.on .n { left: 10px !important; top: 15px !important; }
  .nx-detail { display: block; padding: 16px 0 6px; }
  .nx-detail em { display: block; font-style: normal; font-size: 13px; line-height: 1.5; color: var(--blue); }
  .nx-detail p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--grey); }
  .nx-detail.fade { animation: softIn .5s ease both; }
}
/* Value panels share one space sized to the tallest, so switching never moves the tabs or the page */
.lever-stage { display: grid; }
.lever-stage > .pane { display: block; grid-area: 1 / 1; visibility: hidden; }
.lever-stage > .pane.on { visibility: visible; }
@media (max-width: 720px) { .nx-objs .nx-obj { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; } }

/* Round 23: one idea in the hero */
.hero .tag + .hero-co { margin-top: 20px; font-size: 16px; max-width: 560px; line-height: 1.6; }

/* Round 24: the proposition leads the hero; the name stays in the navigation */
.hero h1.prop { font-size: clamp(38px, 4.8vw, 66px); line-height: 1.1; letter-spacing: -0.015em; max-width: 780px; color: var(--white); margin-top: 22px; }
.hero h1.prop + .rule { margin: 34px 0 24px; }
.hero .rule + .hero-co { margin-top: 0; font-size: 17px; max-width: 560px; line-height: 1.6; }

/* Round 27: show where you are, and where to go next */
.nav ul a { position: relative; }
.nav ul a.current { color: var(--white); }
.nav ul a.current::after { content: ""; position: absolute; left: 0; right: 0.24em; bottom: -10px; height: 2px; background: var(--blue-soft); }
header.solid .nav ul a.current { color: var(--blue); }
header.solid .nav ul a.current::after { background: var(--blue); }
/* A fine divider separates the homepage sections from the other pages */
.nav ul li:not(.pg) + li.pg { border-left: 1px solid rgba(255,255,255,0.28); padding-left: 34px; }
header.solid .nav ul li:not(.pg) + li.pg { border-left-color: rgba(30,39,52,0.38); }
@media (min-width: 1001px) and (max-width: 1240px) { .nav ul li:not(.pg) + li.pg { padding-left: 20px; } }
@media (max-width: 1000px) {
  .nav ul li:not(.pg) + li.pg { border-left: 0; padding-left: 0; margin-top: 18px; border-top: 1px solid var(--ink); }
  .nav ul a.current::after { display: none; }
  .nav ul a.current { color: var(--blue); }
}

/* Explore further: the pages you have not yet seen */
.explore { padding-top: clamp(64px, 6vw, 88px); padding-bottom: clamp(64px, 6vw, 88px); }
.explore-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; margin-top: 26px; }
.explore-col .label { margin-bottom: 10px; }
.ex-link { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: center; padding: 20px 0 22px; border-top: 1px solid var(--line); color: inherit; }
.explore-col .ex-link:last-child, .explore-grid .ex-link { border-bottom: 1px solid var(--line); }
.ex-link span { grid-column: 1; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--blue); }
.ex-link b { grid-column: 1; font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; color: var(--ink); margin-top: 6px; transition: color .4s ease; }
.ex-link i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 20px; color: var(--blue); transition: transform .4s cubic-bezier(.4,0,.2,1); }
.ex-link:hover b { color: var(--blue); }
.ex-link:hover i { transform: translateX(6px); }
.explore-col .ex-link + .ex-link { border-top: 0; }
@media (max-width: 720px) {
  .explore-grid { grid-template-columns: 1fr; }
  .explore-grid .ex-link + .ex-link { border-top: 0; }
}
.explore-grid { align-items: start; }
.explore-grid .ex-link { align-content: start; }
.explore-grid { align-items: stretch; }

/* Hero rings as a miniature Capital Office (prototype): continuous light, proximity brightness */
.hero-rings[data-orbit] .rotor { display: none; }
.hero-rings[data-orbit] { opacity: .85; }
.hero-rings .orbit .spoke { stroke: #A9C3E6; stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-opacity: 0; }
.hero-rings .orbit .nd { fill: #CFE0F7; fill-opacity: .15; stroke: #8FB0DA; stroke-width: 2; }
.hero-rings .orbit .halo { fill: #9DBBE4; opacity: 0; }
.hero-rings .orbit .spk { fill: #DCE8F8; opacity: 0; }
.hero-rings .orbit .nl { font-family: var(--serif); font-size: 19px; letter-spacing: .2px; fill: #EEF3FA; opacity: .34; }
.hero-rings .orbit .core-l { font-family: var(--sans); font-size: 15px; letter-spacing: 4px; fill: #DCE8F8; }
.hero-rings .orbit .orb-run path { fill: none; stroke: #DCE8F8; stroke-linecap: round; }
.hero-rings .orbit .orb-run .glow { fill: #CFE0F7; opacity: .55; }
.hero-rings .orbit .orb-run .head { fill: #FFFFFF; }
.hero-rings .orbit .mid-run path { fill: none; stroke: #8FB0DA; stroke-linecap: round; }
.hero-rings .orbit .mid-run circle { fill: #CFE0F7; }
.hero-rings .orbit .feed { fill: none; stroke: #A9C3E6; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-opacity: 0; }
.hero-rings .orbit .mid-lit { fill: none; stroke: #CFE0F7; stroke-width: 2.5; stroke-linecap: round; stroke-opacity: 0; }
.hero-rings .orbit .mid-run .mglow { fill: #CFE0F7; opacity: .5; }
.hero-rings .orbit .jglow { fill: #9DBBE4; opacity: 0; }
.hero-rings .orbit .ripple { fill: none; stroke: #8FB0DA; stroke-width: 1.5; opacity: 0; }
.hero-rings .orbit .mid-l { font-family: var(--sans); font-size: 13px; letter-spacing: 7px; fill: #8FB0DA; opacity: .5; }
@media (max-width: 720px) {
  .hero-rings[data-orbit] { opacity: .3; }
  .hero-rings .orbit .nl, .hero-rings .orbit .core-l, .hero-rings .orbit .mid-l { display: none; }
}
/* Round 26 (proposal): one statement, one explanation, one action */
.hero h1.prop:first-child { margin-top: 0; }
.hero .rule + .hero-co { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; max-width: 600px; color: #D5DBE3; }
.hero .rule + .hero-co { max-width: 640px; }

/* Round 28: the Capital Office moves like the hero. One continuous light, and only the selected
   partner's line to the client, drawn in from the partner and withdrawn when it moves on */
.sco-stage svg > .rotor { display: none !important; }
.sco .link { opacity: 0 !important; stroke-dashoffset: 100 !important; filter: none !important; transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1), opacity .7s ease !important; transition-delay: 0s !important; }
.sco .link.on { opacity: 1 !important; stroke-dashoffset: 0 !important; stroke: var(--blue-soft) !important; stroke-width: 2 !important; }
.sco .flow { transition: opacity .7s ease !important; transition-delay: 0s !important; }
.sco .flow.on { opacity: .8 !important; transition: opacity .7s ease .5s !important; }
.sco-stage .runner { transition: none !important; opacity: 0; }
.sco.drawn .sco-stage .runner { opacity: 1; transition: opacity .8s ease !important; }
.sco-stage .runner path { fill: none; stroke: #DCE8F8; stroke-linecap: round; }
.sco-stage .runner circle { fill: #FFFFFF; filter: drop-shadow(0 0 6px rgba(220,232,248,1)) drop-shadow(0 0 16px rgba(143,176,218,.9)); }

/* The client pulses slowly as it is served, sending a soft ripple outward; Orpheon's ring stays calm */
.sco-stage .tie { display: none !important; }
.sco-stage .core { transform-box: fill-box; transform-origin: center; animation: coreSwell 2.8s ease-in-out infinite; }
.sco-stage .core-ripple { fill: none; stroke: #8FB0DA; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: coreRipple 2.8s ease-out infinite; }
@keyframes coreSwell { 0%, 100% { transform: scale(1); filter: none; } 55% { transform: scale(1.035); filter: drop-shadow(0 0 18px rgba(58,127,204,0.55)); } }
@keyframes coreRipple { 0%, 40% { transform: scale(1); opacity: 0; } 55% { opacity: .45; } 100% { transform: scale(1.27); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sco-stage .core, .sco-stage .core-ripple { animation: none; } }
/* Partners fade with the light: the text and outline dim while the pill itself stays solid */
.sco.live .sco-node { transition: transform .6s ease, background .7s ease, box-shadow .7s ease !important; }
.sco.live .sco-node:not(.on) { color: rgba(255,255,255,var(--lit,1)); border-color: rgba(143,176,218,calc(0.45 * var(--lit,1))); }
.sco.live .sco-node.dashed:not(.on) { color: rgba(213,219,227,var(--lit,1)); }
/* The key shows Orpheon's ring */
.sco-key .k-arc { width: 12px !important; height: 12px !important; border-radius: 50% !important; margin: 0 7px; background: none !important; border: 2px solid #DCE8F8; box-shadow: 0 0 8px rgba(143,176,218,.8) !important; }
/* Why now: the department stays at the centre of the flows; Orpheon sits beneath it on a longer
   dotted line and takes no space in the flow, so it never moves the department */
.mf-mid .mf-orph { position: relative; margin-top: 30px; }
.mf-mid .mf-orph::before { content: ""; position: absolute; left: 50%; top: -31px; height: 30px; border-left: 2px dotted var(--blue-soft); }
@media (min-width: 901px) {
  .mf-wrap .mflow { padding-bottom: 190px; }
  .mf-wrap .mf-mid { position: relative; align-self: center; }
  .mf-wrap .mf-mid .mf-orph { position: absolute; left: 0; right: 0; top: calc(100% + 64px); margin-top: 0; }
  .mf-wrap .mf-mid .mf-orph::before { top: -65px; height: 64px; }
}
/* Both column headings on one line, and the explanation card's top level with them; the card sizes to its content */
.mf-wrap .mflow { align-items: start !important; align-self: start !important; }
.mf-wrap .mf-mid { align-self: center; }
.mf-wrap .mf-cap { align-self: start; margin-top: 0; }
@media (max-width: 900px) { .mf-mid .mf-orph { margin-top: 26px; } .mf-mid .mf-orph::before { top: -27px; height: 26px; } }

/* Walkthrough: one continuous spark with a tapering tail; steps follow it with no lag of their own */
.demo-track li { transition: none !important; }
.demo-track li::before { transition: background .6s ease, border-color .6s ease, box-shadow .6s ease !important; }
.demo-track li.lit::before { background: #8FB0DA; border-color: #DCE8F8; box-shadow: 0 0 10px rgba(143,176,218,.7); }
.demo-track li.done::before { background: var(--navy); border-color: var(--blue-soft); }
.demo-dot { transition: none !important; }
.demo-dot::before { content: ""; position: absolute; right: 50%; top: 50%; width: 150px; height: 3px; transform: translateY(-50%); border-radius: 3px; background: linear-gradient(to right, rgba(220,232,248,0), rgba(220,232,248,.25) 45%, rgba(220,232,248,.9)); pointer-events: none; }

/* Why now: more room above the diagram */
@media (min-width: 901px) { #money-cycle .mf-wrap { margin-top: 84px; } }
/* The Orpheon card: white, a fine blue outline and Orpheon's ring, set apart from the navy department;
   the dotted line meets it at a small blue point */
.mflow .mf-orph { background: var(--white) !important; border: 1px solid rgba(31,95,168,0.32) !important; border-radius: 12px !important; padding: 20px 22px 22px !important; box-shadow: 0 10px 28px rgba(30,39,52,0.07); transition: border-color .6s ease, box-shadow .6s ease !important; }
.mflow .mf-orph .label { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); }
.mflow .mf-orph .orph-ring { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--blue); box-shadow: 0 0 0 3px rgba(31,95,168,0.12); flex: none; }
.mflow .mf-orph p:not(.label) { font-family: var(--serif); font-size: 16px; line-height: 1.45; color: var(--ink); margin-top: 10px; }
.mflow .mf-orph::after { content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(31,95,168,0.14); }
.mflow .mf-orph:hover, .mflow .mf-orph.on, .mflow .mf-orph:focus-visible { border-color: var(--blue) !important; box-shadow: 0 0 0 4px rgba(31,95,168,0.10), 0 12px 30px rgba(30,39,52,0.10) !important; }
.mflow .mf-orph::before { border-left-color: var(--blue) !important; opacity: .55; }
.mflow .mf-orph { padding: 16px 18px 18px !important; }
.mflow .mf-orph .label { letter-spacing: 0.36em; }
.mflow .mf-orph p:not(.label) { font-size: 15px; line-height: 1.45; margin-top: 8px; }

/* Homepage: why Orpheon exists. Without script the three paragraphs simply stack. With script the
   section holds in place while the reader scrolls, showing one paragraph at a time; the line on the
   left fills continuously so the three read as one connected argument */
.why-story { background: var(--white); padding: 0; }
.why-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 32px clamp(48px, 7vw, 110px); align-items: center; padding-top: clamp(80px, 8vw, 112px); padding-bottom: clamp(80px, 8vw, 112px); }
.why-left h2 { margin-top: 18px; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.15; }
.why-left .label::before { content: ""; display: block; width: 32px; height: 1px; background: currentColor; margin-bottom: 18px; }
.why-steps { list-style: none; margin-top: 44px; position: relative; padding-left: 30px; max-width: none; }
.why-steps::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.why-steps::after { content: ""; position: absolute; left: 6px; top: 10px; width: 1px; height: calc((100% - 20px) * var(--p, 0)); background: var(--blue); }
.why-steps li { position: relative; }
.why-steps li + li { margin-top: 14px; }
.why-steps li::before { content: ""; position: absolute; left: -30px; top: 6px; width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; background: var(--white); border: 2px solid var(--blue-soft); transition: background .5s ease, border-color .5s ease, box-shadow .5s ease; z-index: 1; }
.why-steps li.on::before { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 5px rgba(31,95,168,0.14); }
.why-steps li.done::before { border-color: var(--blue); }
.why-steps button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-family: var(--serif); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.35; color: var(--grey-2, #8A94A3); transition: color .5s ease; }
.why-steps button .n { display: inline-block; width: 30px; font-size: 14px; color: var(--blue); }
.why-steps li.on button { color: var(--ink); }
.why-paras .t { display: none; }
.why-paras .why-p + .why-p { margin-top: 26px; }
.why-paras p { font-family: var(--serif); font-size: clamp(19px, 1.65vw, 23px); line-height: 1.6; color: var(--ink); }
/* Reading focus (enabled by script): the page scrolls normally; the headline and line stay beside the
   text while each paragraph brightens and rises as it reaches the middle of the screen */
.why-story.flow .why-grid { align-items: start; }
.why-story.flow .why-left { position: sticky; top: 140px; }
.why-story.flow .why-paras .why-p + .why-p { margin-top: 56px; }
.why-story.flow .why-p { will-change: opacity, transform; }@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .why-steps { display: flex; gap: 0; padding-left: 0; margin-top: 24px; }
  .why-steps::before { left: 6px; right: 6px; top: 6px; bottom: auto; width: auto; height: 1px; }
  .why-steps::after { left: 6px; top: 6px; height: 1px; width: calc((100% - 12px) * var(--p, 0)); }
  .why-steps li { flex: 1; padding-top: 22px; }
  .why-steps li + li { margin-top: 0; }
  .why-steps li::before { left: 0; top: 0; }
  .why-steps li:last-child { flex: 0 0 auto; }
  .why-steps li:last-child::before { left: auto; right: 0; }
  .why-steps button { font-size: 0; }
  .why-steps button .n { font-size: 14px; width: auto; }
  .why-steps li:last-child button { display: block; text-align: right; }
  .why-paras .t { display: block; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
  .why-paras p { font-size: 17px; line-height: 1.6; }
  .why-story.flow .why-left { position: static; }
  .why-story .why-steps { display: none; }
  .why-story.flow .why-paras .why-p + .why-p { margin-top: 40px; }
}
@media (max-width: 900px) { .why-steps li button { display: block; line-height: 1; } }

/* ============ Round 34: phone diagrams ============ */
.nx-for { display: none; }
@media (max-width: 720px) {
  /* Capital Office: the travelling light and tail on phones too; the buttons brighten and fade with it */
  .sco-stage .runner { display: inline !important; }
  .sco.live .sco-list button:not(.on) { color: rgba(255,255,255,calc(0.45 + 0.55 * var(--lit,1))); border-color: rgba(143,176,218,calc(0.2 + 0.3 * var(--lit,1))); }
  .sco-list button { transition: background .6s ease, border-color .6s ease, color .6s ease; }

  /* Partner network: one compact flow, Orpheon, the partners it brings in, the client, so the
     objective and its partners are seen together */
  .nx-detail em { display: none; }
  .nx-detail { padding-bottom: 0; }
  .nx-map { display: flex !important; flex-direction: column; align-items: stretch; gap: 0 !important; margin-top: 18px; position: relative !important; top: auto !important; }
  .nx-orph, .nx-client { display: grid !important; grid-template-columns: 70px auto; column-gap: 16px; align-items: center; justify-content: center; text-align: left; }
  .nx-orph .nx-disc, .nx-client .nx-disc { width: 70px !important; height: 70px !important; grid-row: 1 / span 2; }
  .nx-orph .nx-disc b { font-size: 14px !important; margin: 0 !important; }
  .nx-orph .orbit { inset: -8px !important; width: calc(100% + 16px) !important; height: calc(100% + 16px) !important; }
  .nx-orph .nx-cap { margin: 0 !important; text-align: left !important; font-size: 14px; }
  .nx-client .nx-disc span { font-size: 8px !important; letter-spacing: .18em !important; }
  .nx-client .nx-cap-label, .nx-client .nx-out { position: static !important; transform: none !important; left: auto !important; top: auto !important; text-align: left !important; white-space: normal !important; margin: 0 !important; max-width: 230px; }
  .nx-client .nx-cap-label { align-self: end; }
  .nx-client .nx-out { align-self: start; margin-top: 4px !important; font-size: 16px !important; }
  .nx-for { display: block; text-align: center; margin: 0 0 12px; }
  .nx-for::before, .nx-partners::after { content: "\2193"; display: block; text-align: center; color: var(--blue); font-size: 20px; line-height: 1; padding: 12px 0 12px; }
  .nx-for span { display: block; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--blue); }
  .nx-for b { display: block; margin-top: 4px; font-family: var(--serif); font-weight: 400; font-size: 17px; color: var(--ink); }
  .nx-partners { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 0 !important; }
  .nx-partners::before { display: none !important; }
  .nx-partners::after { grid-column: 1 / -1; padding-top: 14px; }
  .nx-p { display: flex !important; align-items: center; gap: 9px; padding: 10px 12px !important; border: 1px solid var(--line); border-radius: 8px; background: var(--white); opacity: 1 !important; transition: background .6s ease, border-color .6s ease !important; }
  .nx-p span { display: none !important; }
  .nx-p i { margin: 0 !important; flex: none; width: 10px !important; height: 10px !important; }
  .nx-p b { margin: 0 !important; font-size: 14px !important; line-height: 1.25; color: var(--grey) !important; transition: color .6s ease; }
  .nx-p.on { background: #EAF1FA; border-color: var(--blue); }
  .nx-p.on b { color: var(--blue) !important; }
}

/* Why now on phones: the diagram runs without interruption; the explanation docks at the foot of
   the screen while the diagram is in view, then settles beneath it */
@media (max-width: 900px) {
  .mf-wrap .mf-cap { position: sticky; bottom: 10px; z-index: 6; margin-top: 22px !important; padding: 16px 18px 16px !important; box-shadow: 0 -6px 30px rgba(30,39,52,0.22) !important; }
  .mf-cap .where { font-size: 10px; }
  .mf-cap h3 { font-size: 19px !important; margin-top: 4px !important; }
  .mf-cap .cap-row { margin-top: 10px !important; padding-top: 0 !important; }
  .mf-cap .cap-row + .cap-row { margin-top: 10px !important; padding-top: 10px !important; }
  .mf-cap .cap-row span { font-size: 9.5px !important; }
  .mf-cap .cap-row.ch p { font-size: 13.5px !important; line-height: 1.45 !important; margin-top: 3px !important; }
  .mf-cap .cap-row.im p { font-size: 16px !important; line-height: 1.35 !important; margin-top: 3px !important; }
}
@media (max-width: 720px) {
  .netx { row-gap: 0 !important; }
  .nx-detail { padding: 12px 0 0 !important; }
  .nx-detail p { font-size: 14px !important; line-height: 1.55 !important; margin-top: 0 !important; }
  .nx-map { margin-top: 16px !important; }
  .nx-orph, .nx-client { grid-template-columns: 58px auto; column-gap: 14px; }
  .nx-orph .nx-disc, .nx-client .nx-disc { width: 58px !important; height: 58px !important; }
  .nx-orph .nx-disc b { font-size: 12.5px !important; }
  .nx-orph .nx-cap { grid-row: 1 / span 2; align-self: center; }
  .nx-client .nx-disc span { font-size: 7px !important; letter-spacing: .14em !important; }
  .nx-for::before, .nx-partners::after { font-size: 18px; padding: 8px 0 8px; }
  .nx-for { margin-bottom: 10px; }
  .nx-for b { font-size: 16px; }
  .nx-partners { gap: 6px !important; }
  .nx-p { padding: 8px 10px !important; align-items: center !important; }
  .nx-p i { align-self: center !important; top: 0 !important; }
  .nx-p b { font-size: 13.5px !important; }
}
@media (max-width: 900px) {
  .mf-wrap .mf-cap { padding: 13px 16px 13px !important; bottom: 8px; border-radius: 12px !important; }
  .mf-cap .where { font-size: 9px !important; letter-spacing: .26em !important; }
  .mf-cap h3 { font-size: 17px !important; line-height: 1.25 !important; margin-top: 3px !important; }
  .mf-cap .cap-row { margin-top: 7px !important; }
  .mf-cap .cap-row + .cap-row { margin-top: 8px !important; padding-top: 8px !important; }
  .mf-cap .cap-row span { font-size: 8.5px !important; letter-spacing: .24em !important; }
  .mf-cap .cap-row.ch p { font-size: 13px !important; line-height: 1.4 !important; }
  .mf-cap .cap-row.im p { font-size: 15px !important; line-height: 1.32 !important; }
}
/* Walkthrough on phones: the spark runs down the line of steps, its tail trailing above it */
@media (max-width: 900px) {
  .demo-dot { display: block !important; }
  .demo-track li { opacity: .4; }
  .demo-dot::before { right: auto; left: 50%; top: auto; bottom: 50%; width: 3px; height: 110px; transform: translateX(-50%); background: linear-gradient(to bottom, rgba(220,232,248,0), rgba(220,232,248,.25) 45%, rgba(220,232,248,.9)); }
}
/* Walkthrough: the line runs through the centre of the circles, and the spark sits exactly inside each ring */
.demo-track::before { top: 15px !important; }
.demo-dot { top: 9px; width: 14px !important; height: 14px !important; box-shadow: 0 0 10px rgba(220,232,248,.75), 0 0 20px rgba(143,176,218,.45) !important; }
@media (max-width: 900px) { .demo-track::before { left: 12px !important; } }

/* ============ Round 36: show the value, keep the method for the meeting ============ */
/* Under each value diagram: the outcome only */
.pane .pane-gain { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-dark); font-family: var(--serif); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.4; color: var(--white); max-width: 620px; }
.pane .pane-gain span { display: block; margin-bottom: 6px; font-family: var(--sans); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--blue-soft); }
.pane .pane-foot { margin-top: 18px; }
/* Where we start: a short invitation rather than a package of deliverables */
#start { padding-top: clamp(64px, 6vw, 92px); padding-bottom: clamp(64px, 6vw, 92px); }
#start .start-line { margin-top: 16px; max-width: 640px; font-size: 18px; line-height: 1.6; color: var(--grey); }
#start .start-line strong { font-weight: 400; color: var(--ink); }

/* What Orpheon builds: the section's introduction */
.arch .kicker { max-width: 640px; }
/* ============ Round 43: what Orpheon builds, drawn as flow ============ */
/* Revenue, capital, commitments and expertise are focused through Orpheon, set out as four parts,
   and joined into one line that grows brighter as it flows into the Athletic Department. */
.fx { margin-top: 48px; }
.fx-stage svg { display: block; width: 100%; height: auto; overflow: visible; }
.fx-cap { font-family: var(--sans); font-size: 13px; letter-spacing: 4px; fill: #E6EEF9; }
.fx-src { fill: rgba(195,203,214,.7); }
.fx-orph { fill: var(--blue-soft); letter-spacing: 6px; paint-order: stroke; stroke: var(--navy); stroke-width: 8px; stroke-linejoin: round; }
.fx-part-g { cursor: pointer; }
.fx-hit { fill: none; stroke: transparent; pointer-events: stroke; }
.fs-dot { fill: #EEF4FC; pointer-events: none; }
.fb-in { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.fb-line { fill: none; stroke: #CFE0F7; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.fb-lens { fill: rgba(207,224,247,.12); stroke: #CFE0F7; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fb-client { fill: var(--blue); }
.fb-rim { fill: none; stroke: #EAF1FB; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.fb-client-text { font-family: var(--serif); font-size: 19px; fill: var(--white); pointer-events: none; }
.fb-outcome { font-family: var(--serif); font-size: 17px; fill: var(--white); }
/* The four parts, set out beneath the drawing */
.fx-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin-top: 44px; align-items: start; }
.fx-col { position: relative; padding-top: 20px; border-top: 1px solid rgba(143,176,218,.28); cursor: pointer; opacity: .5; transition: opacity .9s ease; }
.fx-col::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: #CFE0F7; transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.4,0,.2,1); }
.fx-col.on { opacity: 1; }
.fx-col.on::before { transform: scaleX(1); }
.fx-k { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--blue-soft); }
.fx-k span { margin-right: 12px; color: #CFE0F7; }
.fx-col h3 { margin-top: 14px; font-size: 21px; line-height: 1.25; color: var(--white); }
.fx-p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--on-dark); }
.fx-inc { margin-top: 14px; font-size: 13px; line-height: 1.75; color: #C7D8EF; }
.fx-inc span { display: block; position: relative; padding-left: 16px; }
.fx-inc span::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid #CFE0F7; background: var(--navy); transition: background .8s ease; }
.fx-col.on .fx-inc span::before { background: var(--blue); }
@media (max-width: 1000px) and (min-width: 721px) { .fx-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 32px; } }
@media (max-width: 720px) {
  .fx { margin-top: 30px; }
  .fx-cap { font-size: 20px; letter-spacing: 4px; }
  .fx-num { fill: #CFE0F7; letter-spacing: 3px; }
  .fb-client-text { font-size: 21px; }
  .fb-outcome { font-size: 24px; }
  .fx-index { grid-template-columns: minmax(0, 1fr); margin-top: 26px; }
  .fx-col { padding: 14px 0 16px; opacity: .62; }
  .fx-col:not(.on) .fx-more { display: none; }
  .fx-col h3 { margin-top: 10px; font-size: 22px; }
  .fx-p { font-size: 16px; }
  .fx-inc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; font-size: 14px; line-height: 1.5; }
  .fx-inc span::before { top: .5em; }
}

/* ============ Round 46: Explore further, clearly selectable ============ */
/* Each destination is a light, compact card with a defined blue hairline: the page name in blue serif,
   a short description, and a small outlined "Explore" button in the hero button's family that fills on hover.
   The same card on every page. */
.explore-grid { gap: 20px; column-gap: 20px; margin-top: 24px; align-items: stretch; }
.explore-col .ex-card + .ex-card { margin-top: 14px; }
.ex-motif { display: none !important; }
.ex-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 24px; align-items: center; padding: 22px 24px; border-radius: 10px; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(31,95,168,.32); transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.ex-card:hover, .ex-card:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(31,95,168,.62), 0 14px 30px rgba(30,39,52,.08); }
.ex-card:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; }
.ex-k { grid-column: 1; font-family: var(--serif); font-size: 23px; line-height: 1.2; color: var(--blue); }
.ex-d { grid-column: 1; margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--grey); }
.ex-btn { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 11px; line-height: 1; letter-spacing: .24em; text-transform: uppercase; color: var(--blue); padding: 12px 15px; border: 1px solid rgba(31,95,168,.45); border-radius: 4px; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.ex-arrow { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s ease; }
.ex-card:hover .ex-btn, .ex-card:focus-visible .ex-btn { background: var(--blue); border-color: var(--blue); color: var(--white); }
.ex-card:hover .ex-arrow, .ex-card:focus-visible .ex-arrow { transform: translateX(4px); }
/* One gentle nudge of each arrow when the cards first come into view */
.reveal.in .ex-card .ex-arrow { animation: exNudge 1.3s ease .6s 1 backwards; }
.reveal.in .ex-card + .ex-card .ex-arrow { animation-delay: .95s; }
@keyframes exNudge { 0% { transform: none; } 25% { transform: translateX(6px); } 50%, 100% { transform: none; } }
@media (hover: none) { .ex-card:active .ex-btn { background: var(--blue); border-color: var(--blue); color: var(--white); } }
@media (max-width: 900px) { .explore-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ex-card { grid-template-columns: minmax(0, 1fr); padding: 22px 22px 24px; } .ex-btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 16px; } }
@media (prefers-reduced-motion: reduce) { .ex-card .ex-arrow { animation: none !important; } .ex-card { transition: none; } }

/* Round 49: partner network, no caption under Orpheon; on phones the disc stands alone, centered */
@media (max-width: 720px) { .nx-orph { grid-template-columns: auto !important; column-gap: 0 !important; } }

/* Round 51: College, the first step closes the hero. The navy continues beneath a hairline */
.start-band { background: var(--navy); padding: 0 0 56px; }
.sb-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 0 40px; align-items: center; padding-top: 32px; border-top: 1px solid var(--line-dark); }
.sb-row .label { margin: 0; color: var(--blue-soft); }
.sb-line { margin: 0; max-width: 760px; font-family: var(--serif); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.4; color: var(--white); }
.sb-line span { display: block; color: var(--on-dark); }
.sb-link { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 12px 15px; border: 1px solid rgba(143,176,218,.45); border-radius: 4px; font-size: 11px; line-height: 1; letter-spacing: .24em; text-transform: uppercase; color: var(--blue-soft); white-space: nowrap; transition: background .3s ease, color .3s ease, border-color .3s ease; }
.sb-link:hover { background: var(--blue-soft); border-color: var(--blue-soft); color: var(--navy); }
.sb-link span { display: inline-block; transition: transform .3s ease; }
.sb-link:hover span { transform: translateY(3px); }
@media (max-width: 900px) { .sb-row { grid-template-columns: minmax(0, 1fr); gap: 14px 0; } }