/* About Us + Core Processes - page rules shared by both inner pages.
   Builds on site.css tokens. Program card / chip rules are copied from home.css (not loaded here). */

/* anchors clear the fixed header */
main [id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ---------- Page hero (inner-page variant) ---------- */
.ph { background: var(--bg); }
.ph--core::before { display: none; }
.ph-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.ph h1 { max-width: 14ch; }
.ph .lede { margin-bottom: 36px; }
.ph-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.ph-meta { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ph-meta b { display: block; font: 600 22px/1 var(--f-display); letter-spacing: -0.03em; text-transform: none; color: var(--ink); margin-bottom: 8px; }
@media (max-width: 960px) { .ph-grid { grid-template-columns: 1fr; } }

/* framed figure with corner ticks + scan line */
.frame { position: relative; margin: 0; }
.frame-img { position: relative; border-radius: var(--r); overflow: hidden; background: var(--night-2); box-shadow: 0 40px 90px -40px rgba(11,18,15,.45); }
.frame-img img { width: 100%; height: 100%; object-fit: cover; }
.frame-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,11,9,.55)); pointer-events: none; }
.frame-scan { position: absolute; top: 0; bottom: 0; width: 2px; left: 10%; background: var(--signal); box-shadow: 0 0 18px 2px rgba(108,240,143,.6); opacity: .85; animation: scan 6s var(--ease) infinite alternate; z-index: 1; }
@keyframes scan { to { left: 90%; } }
.shot .frame-scan { animation: none; left: 62%; }
.frame::before, .frame::after { content: ""; position: absolute; width: 22px; height: 22px; border: 1.5px solid var(--green); z-index: 2; pointer-events: none; }
.frame::before { top: -10px; left: -10px; border-right: 0; border-bottom: 0; }
.frame::after { bottom: -10px; right: -10px; border-left: 0; border-top: 0; }
.frame-cap { position: absolute; left: 18px; bottom: 16px; z-index: 2; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); display: flex; gap: 10px; align-items: center; }
.frame-cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(108,240,143,.25); }

/* floating readout cards */
.readout {
  position: absolute; z-index: 3; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; box-shadow: 0 20px 50px -20px rgba(11,18,15,.35);
  max-width: 220px;
}
.readout span { display: block; font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.readout b { display: block; font: 600 30px/1 var(--f-display); letter-spacing: -0.04em; color: var(--ink); margin: 8px 0 6px; }
.readout b i { font-style: normal; color: var(--green-deep); }
.readout p { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.readout--a { top: 8%; left: -36px; }
.readout--b { bottom: -28px; right: 28px; }
@media (max-width: 1180px) { .readout--a { left: 16px; } }
@media (max-width: 560px) {
  .readout { position: static; max-width: none; margin-top: 12px; box-shadow: none; }
  .readout--b { margin-top: 10px; }
  .frame:has(.readout) .frame-cap { top: 16px; bottom: auto; }
}

/* ---------- About: mission ---------- */
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.mission-copy h2 { margin: 20px 0 28px; max-width: 16ch; }
.mission-copy .lede + .lede { margin-top: 18px; }
.mission-copy .solve { margin-top: 28px; font: 600 clamp(20px, 1.8vw, 24px)/1.35 var(--f-display); letter-spacing: -0.02em; color: var(--ink); max-width: 30ch; }
.align-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 32px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); overflow: hidden; }
.align-row a { padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; font-weight: 600; font-size: 15px; transition: background .3s, color .3s; }
.align-row a + a { border-left: 1px solid var(--line); }
.align-row a i { font: 500 10.5px/1 var(--f-mono); font-style: normal; letter-spacing: .12em; color: var(--green-deep); }
.align-row a:hover { background: var(--ink); color: var(--paper); }
.align-row a:hover i { color: var(--signal); }
.mission-figure .frame-img { aspect-ratio: 4 / 3.3; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(56px, 7vw, 88px); }
.fact { padding: 26px 24px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); position: relative; overflow: hidden; }
.fact::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 40px; background: var(--green); }
.fact b { display: block; font: 600 clamp(36px, 3.6vw, 48px)/1 var(--f-display); letter-spacing: -0.045em; margin-bottom: 14px; }
.fact b i { font-style: normal; color: var(--green-deep); }
.fact p { color: var(--ink-2); font-size: 15.5px; max-width: 30ch; }
.fact small { display: block; margin-top: 14px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
@media (max-width: 900px) { .mission-grid { grid-template-columns: 1fr; } .facts { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .align-row { grid-template-columns: 1fr 1fr; } .align-row a:nth-child(3) { border-left: 0; } .align-row a:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* ---------- About: challenges (sticky index + blocks) ---------- */
.challenges { overflow: clip; }
.glow { position: absolute; width: 640px; height: 640px; border-radius: 50%; filter: blur(120px); opacity: .2; pointer-events: none; background: var(--green); }
.glow--tr { top: -260px; right: -160px; }
.glow--bl { bottom: -300px; left: -220px; opacity: .14; }
.ch-layout { display: grid; grid-template-columns: 280px 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; position: relative; }
.spy { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 2px; }
.spy-label { font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--night-mute); margin-bottom: 14px; }
.spy a { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: center; padding: 14px 0 14px 18px; color: var(--night-mute); font-weight: 500; font-size: 15.5px; transition: color .3s; }
.spy a::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--night-line); border-radius: 2px; transition: background .3s, box-shadow .3s; }
.spy a i { font: 500 11px/1 var(--f-mono); font-style: normal; letter-spacing: .1em; }
.spy a:hover { color: #fff; }
.spy a.is-on { color: #fff; }
.spy a.is-on::before { background: var(--signal); box-shadow: 0 0 12px rgba(108,240,143,.6); }
.spy a.is-on i { color: var(--signal); }
.spy-meter { margin-top: 22px; height: 2px; background: var(--night-line); border-radius: 2px; overflow: hidden; }
.spy-meter span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--signal); transition: width .2s linear; }

.ch-list { display: grid; gap: clamp(56px, 7vw, 96px); }
.ch { position: relative; }
.ch-media { position: relative; aspect-ratio: 21 / 8; border-radius: var(--r); overflow: hidden; border: 1px solid var(--night-line); margin-bottom: 32px; }
.ch-media img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transform: scale(1.04); }
.ch-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,11,9,.85), rgba(6,11,9,.1) 60%); }
.ch-num { position: absolute; z-index: 1; left: 24px; bottom: 18px; font: 600 clamp(64px, 8vw, 112px)/.8 var(--f-display); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px rgba(108,240,143,.7); }
.ch-kicker { font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--signal); }
.ch h3 { font-size: clamp(28px, 3vw, 40px); color: #fff; letter-spacing: -0.035em; margin: 14px 0 16px; }
.ch-impact { font-size: 17.5px; max-width: 62ch; }
.ch-flow { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: stretch; margin-top: 30px; }
.ch-panel { border-radius: var(--r); padding: 22px 22px 24px; border: 1px solid var(--night-line); background: var(--night-2); }
.ch-panel h4 { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--night-mute); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.ch-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ch-panel li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.45; color: var(--night-text); }
.ch-panel--issue li::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-top: 7px; border: 1px solid var(--night-mute); transform: rotate(45deg); }
.ch-panel--issue li { color: var(--night-mute); }
.ch-panel--action { border-color: rgba(108,240,143,.3); background: linear-gradient(180deg, rgba(69,181,91,.12), rgba(69,181,91,.03)); }
.ch-panel--action h4 { color: var(--signal); }
.ch-panel--action li::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; border-radius: 50%; border: 1px solid rgba(108,240,143,.5);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-4.9' fill='none' stroke='%236cf08f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ch-arrow { display: grid; place-items: center; color: var(--signal); }
.ch-arrow svg { width: 22px; height: 22px; }
@media (max-width: 960px) {
  .ch-layout { grid-template-columns: 1fr; }
  .ch-layout > .spy { display: none; }
}
@media (max-width: 700px) {
  .ch-flow { grid-template-columns: 1fr; }
  .ch-arrow { height: 40px; }
  .ch-arrow svg { transform: rotate(90deg); }
  .ch-media { aspect-ratio: 16 / 9; }
}

/* ---------- Programs (copied pattern from home.css, extended for full descriptions) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--paper);
  font-size: 14px; font-weight: 500; color: var(--ink-2); transition: all .25s;
}
.chips button span { font-family: var(--f-mono); font-size: 11px; color: var(--mute); margin-left: 4px; }
.chips button:hover { border-color: var(--ink); }
.chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chips button[aria-pressed="true"] span { color: var(--signal); }
.section-head .chips { justify-content: flex-end; }
@media (max-width: 860px) { .section-head .chips { justify-content: flex-start; } }
.is-hidden { display: none !important; }

.prog-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.prog { padding: 28px 28px 26px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
.prog::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); opacity: .9; }
.prog header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.prog-n { font-size: 11px; color: var(--mute); letter-spacing: .1em; }
.prog h3 { font-size: clamp(21px, 1.8vw, 25px); max-width: 26ch; }
.prog p { color: var(--ink-2); font-size: 15.5px; line-height: 1.62; }
.prog footer { margin-top: auto; padding-top: 6px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.prog footer small { font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.stage-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.stage-bar i { height: 4px; border-radius: 2px; background: var(--line); }
.prog[data-tags="planning"] .stage-bar i:nth-child(-n+1),
.prog[data-tags="active"] .stage-bar i:nth-child(-n+2),
.prog[data-tags="advanced"] .stage-bar i:nth-child(-n+3),
.prog[data-tags="executed"] .stage-bar i { background: var(--c); }
.prog[data-tags="planning"] { --c: var(--status-planning); }
.prog[data-tags="active"] { --c: var(--status-active); }
.prog[data-tags="advanced"] { --c: var(--status-advanced); }
.prog[data-tags="executed"] { --c: var(--status-executed); }
.legend { display: grid; grid-template-columns: repeat(4, 1fr); margin: 28px 0 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.legend > div { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.legend > div + div { border-left: 1px solid var(--line); }
.legend dd { margin: 0; color: var(--mute); font-size: 14px; }
@media (max-width: 900px) { .prog-list { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .legend { grid-template-columns: 1fr 1fr; } .legend > div:nth-child(3) { border-left: 0; } .legend > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 520px) { .prog { padding: 24px 20px 22px 22px; } }

/* ---------- About: global network ---------- */
.network-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.network-copy h2 { margin: 20px 0 24px; font-size: clamp(32px, 3.6vw, 48px); }
.network-copy .lede { margin-bottom: 28px; }
.who { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.who li { font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink-2); }
.who-label { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.map-panel { margin: 0; position: relative; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.map-panel img { width: 100%; height: auto; }
.map-panel header { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 14px 18px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 85%, transparent); z-index: 1; }
.map-panel header span:last-child { color: var(--green-deep); display: flex; gap: 8px; align-items: center; }
.map-panel header span:last-child::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 5px rgba(69,181,91,0); } 0% { box-shadow: 0 0 0 0 rgba(69,181,91,.5); } }
.map-panel .map-img { padding-top: 40px; }
@media (max-width: 960px) { .network-grid { grid-template-columns: 1fr; } }

/* ---------- CTA band (both pages) ---------- */
.cta-band { position: relative; overflow: hidden; padding: clamp(88px, 11vw, 150px) 0; }
.cta-band .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; }
.cta-band h2 { color: #fff; margin: 20px 0 22px; font-size: clamp(38px, 5vw, 68px); }
.cta-band .lede { max-width: 50ch; }
.cta-band .ph-ctas { justify-content: flex-end; }
.cta-band::after { content: ""; position: absolute; left: 50%; top: 0; width: 900px; max-width: 100%; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--green), transparent); }
@media (max-width: 900px) { .cta-band .wrap { grid-template-columns: 1fr; } .cta-band .ph-ctas { justify-content: flex-start; } }

/* ---------- Core: hero index panel ---------- */
.ph--core .ph-bp { position: absolute; right: -6%; top: 50%; width: 62%; transform: translateY(-46%); opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.ix-panel { position: relative; border-radius: var(--r); background: linear-gradient(180deg, #101b17, var(--night)); border: 1px solid var(--night-line); color: var(--night-text); padding: 10px; box-shadow: 0 50px 100px -40px rgba(6,11,9,.6); }
.ix-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 16px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--night-mute); }
.ix-head span:last-child { color: var(--signal); display: flex; gap: 8px; align-items: center; }
.ix-head span:last-child::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); }
.ix-panel a { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 10px; border-radius: var(--r-sm); border-top: 1px solid var(--night-line); transition: background .3s; }
.ix-panel a:hover { background: rgba(255,255,255,.04); }
.ix-thumb { width: 64px; height: 48px; border-radius: 6px; overflow: hidden; }
.ix-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .5s var(--ease); }
.ix-panel a:hover .ix-thumb img { transform: scale(1.1); }
.ix-panel b { display: block; font: 600 16px/1.2 var(--f-display); letter-spacing: -0.015em; color: #fff; }
.ix-panel small { display: block; font-size: 13.5px; color: var(--night-mute); margin-top: 4px; }
.ix-panel .ix-n { font: 500 11px/1 var(--f-mono); color: var(--night-mute); letter-spacing: .1em; transition: color .3s; }
.ix-panel a:hover .ix-n { color: var(--signal); }
@media (max-width: 960px) { .ph--core .ph-bp { width: 110%; right: -40%; top: 18%; opacity: .25; } }
@media (max-width: 420px) { .ix-panel a { grid-template-columns: 52px 1fr auto; gap: 12px; } .ix-thumb { width: 52px; height: 40px; } }

/* ---------- Core: disciplines (sticky index + blocks) ---------- */
.disc-layout { display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.disc-nav { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 2px; }
.disc-nav .spy-label { color: var(--mute); }
.disc-nav a:not(.btn) { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: center; padding: 13px 0 13px 18px; color: var(--mute); font-weight: 500; font-size: 15.5px; transition: color .3s; }
.disc-nav a:not(.btn)::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; background: var(--line); border-radius: 2px; transition: background .3s; }
.disc-nav a:not(.btn) i { font: 500 11px/1 var(--f-mono); font-style: normal; letter-spacing: .1em; }
.disc-nav a:not(.btn):hover, .disc-nav a.is-on { color: var(--ink); }
.disc-nav a.is-on::before { background: var(--green); }
.disc-nav a.is-on i { color: var(--green-deep); }
.disc-nav .spy-meter { background: var(--line); }
.disc-nav .spy-meter span { background: var(--green); }
.disc-nav .btn { margin-top: 28px; justify-content: center; }

.disc-list { display: grid; gap: clamp(72px, 9vw, 128px); }
.disc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.disc:nth-child(even) .disc-media { order: 2; }
.disc-media { position: sticky; top: calc(var(--header-h) + 32px); }
.disc-media .frame-img { aspect-ratio: 4 / 3.4; }
.disc-tag { position: absolute; top: 16px; left: 16px; z-index: 3; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(6,11,9,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.14); }
.disc-tag em { font-style: normal; color: var(--signal); }
.disc-copy .eyebrow { margin-bottom: 18px; }
.disc-copy h2 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 18px; }
.disc-copy .lede { font-size: 18px; color: var(--green-deep); font-weight: 500; margin-bottom: 22px; }
.disc-copy p.body { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }
.disc-copy p.body + p.body { margin-top: 14px; }
.spec { margin-top: 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); overflow: hidden; }
.spec h4 { font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
.spec h4 span:last-child { color: var(--green-deep); }
.spec ul { list-style: none; margin: 0; padding: 0; }
.spec li { display: grid; grid-template-columns: 38px 1fr; align-items: center; padding: 12px 18px; font-size: 15.5px; font-weight: 500; }
.spec li + li { border-top: 1px solid var(--line); }
.spec li i { font: 500 11px/1 var(--f-mono); font-style: normal; color: var(--mute); }
.spec--tags ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px; }
.spec--tags li { display: inline-flex; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 99px; font-size: 14px; background: var(--bg); }
.spec--tags li + li { border-top: 1px solid var(--line-2); }
.disc-more { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.partner-note { margin-top: 24px; display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); transition: border-color .3s; }
.partner-note:hover { border-color: var(--green); }
.partner-note img { border-radius: 6px; aspect-ratio: 900 / 578; object-fit: cover; }
.partner-note b { display: block; font: 600 16px/1.25 var(--f-display); letter-spacing: -0.015em; }
.partner-note span { display: block; font-size: 14px; color: var(--mute); margin-top: 4px; }

@media (max-width: 1080px) { .disc { grid-template-columns: 1fr; } .disc:nth-child(even) .disc-media { order: 0; } .disc-media { position: relative; top: 0; } }
@media (max-width: 960px) {
  .disc-layout { grid-template-columns: 1fr; }
  .disc-nav {
    top: var(--header-h); z-index: 20; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 10px var(--gutter);
    background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
  }
  .disc-nav::-webkit-scrollbar { display: none; }
  .disc-nav .spy-label, .disc-nav .spy-meter, .disc-nav .btn { display: none; }
  .disc-nav a:not(.btn) { flex-shrink: 0; grid-template-columns: auto auto; gap: 8px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line-2); font-size: 14px; background: var(--paper); }
  .disc-nav a:not(.btn)::before { display: none; }
  .disc-nav a.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .disc-nav a.is-on i { color: var(--signal); }
  .page-core main [id] { scroll-margin-top: calc(var(--header-h) + 76px); }
}

/* ---------- Core: independence band ---------- */
.indep { overflow: clip; }
.indep-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; position: relative; z-index: 1; }
.indep h2 { color: #fff; margin: 20px 0 24px; }
.indep .lede { max-width: 54ch; }
.indep-stats { display: grid; gap: 14px; }
.indep-stats > div { padding: 24px; border-radius: var(--r); border: 1px solid var(--night-line); background: var(--night-2); }
.indep-stats b { display: block; font: 600 clamp(40px, 4vw, 56px)/1 var(--f-display); letter-spacing: -0.045em; color: #fff; }
.indep-stats b i { font-style: normal; color: var(--signal); }
.indep-stats p { margin-top: 10px; font-size: 15.5px; }
@media (max-width: 900px) { .indep { overflow: clip; }
.indep-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ph-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; font-size: 10px; letter-spacing: .08em; } }

/* ============================================================
   Dark theme. Tokens carry most of it; these are the spots a token can't express:
   raised surfaces, shadows that read on black, green "selected" states, light artwork.
   ============================================================ */
[data-theme="dark"] {
  --raise: #0f1915;            /* card on a paper section: one step above --paper */
  --sel-bg: rgba(69,181,91,.16);
  --sel-bd: rgba(108,240,143,.5);
}
/* always-dark bands get hairline edges so they don't melt into the dark page */
[data-theme="dark"] main > section.dark { box-shadow: inset 0 1px 0 var(--night-line), inset 0 -1px 0 var(--night-line); }
[data-theme="dark"] .paper .card { background: var(--raise); }
[data-theme="dark"] .card:hover { box-shadow: 0 24px 60px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(108,240,143,.14); }
[data-theme="dark"] .frame-img { box-shadow: 0 40px 90px -40px rgba(0,0,0,.85), 0 0 0 1px var(--line); }
[data-theme="dark"] .readout { background: color-mix(in srgb, var(--night-3) 88%, transparent); border-color: var(--line-2); box-shadow: 0 24px 60px -20px rgba(0,0,0,.8); }
[data-theme="dark"] .chips button[aria-pressed="true"] { background: var(--sel-bg); border-color: var(--sel-bd); color: #fff; }
@media (max-width: 960px) { [data-theme="dark"] .disc-nav a.is-on { background: var(--sel-bg); border-color: var(--sel-bd); color: #fff; } }
[data-theme="dark"] .align-row a:hover { background: var(--sel-bg); color: #fff; }
[data-theme="dark"] .fact::after { box-shadow: 0 0 12px rgba(108,240,143,.5); }
/* light line-art and the white-ground map, re-inked for the dark page */
[data-theme="dark"] .ph--core .ph-bp { filter: invert(1) hue-rotate(180deg) brightness(1.2); mix-blend-mode: screen; opacity: .4; }
[data-theme="dark"] .map-panel img { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(1.15) saturate(1.4); mix-blend-mode: screen; }
[data-theme="dark"] .ix-panel { border-color: var(--line-2); box-shadow: 0 50px 100px -40px rgba(0,0,0,.9); }