/* ═══════════════════════════════════════════════════════════════════════
   pages.css — shared by about.html and assessment.html
   Extends assets/site.css design tokens. Keep in sync with index.html.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── nav active state (cross-page) ── */
.navlinks a.on{color:var(--cream);background:rgba(46,91,234,.14)}
.navlinks a.on::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;
  border-radius:50%;background:var(--brass);transform:translateX(-50%)}

/* ═══════════ PAGE HERO (shared) ═══════════ */
.phero{position:relative;overflow:hidden;color:var(--cream);
  background:linear-gradient(168deg,#06102B 0%,#0A1733 46%,#0E1F45 100%);
  padding:clamp(64px,9vw,132px) 0 clamp(64px,9vw,120px)}
.phero-bg{position:absolute;inset:0;z-index:0}
.phero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%;
  animation:kenburns 34s var(--ease2) infinite alternate}
.phero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(4,9,26,.96) 0%,rgba(6,13,34,.88) 42%,rgba(8,17,40,.55) 100%)}
.phero .in{position:relative;z-index:2;max-width:var(--maxw);margin:auto;padding:0 var(--pad);max-width:900px}
.phero .eyebrow{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--brass-dim);
  background:rgba(46,91,234,.11);border-radius:99px;padding:6px 14px;font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sand)}
.phero h1{font-size:clamp(34px,5.4vw,68px);margin:22px 0 0;color:var(--cream);line-height:1.03}
.phero h1 em{font-style:italic;color:var(--brass-lit);font-weight:400}
.phero .lede{margin-top:22px;font-size:clamp(15px,1.3vw,18px);color:var(--ink-on-dark-dim);max-width:52ch}

/* ═══════════ GENERIC PAGE SECTION ═══════════ */
.psec{padding:clamp(64px,8vw,112px) 0;background:var(--paper)}
.psec.alt{background:linear-gradient(178deg,#F4F8FF,#E7EFFC);border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light)}
.psec.dark{background:linear-gradient(178deg,var(--espresso),#071232 60%,var(--bark));color:var(--cream)}
.psec.dark .head h2{color:var(--cream)}
.psec.dark .head p{color:var(--ink-on-dark-dim)}
.psec.dark .head .eyebrow{color:var(--sand);border-color:var(--brass-dim);background:rgba(46,91,234,.09)}
.psec .wrap{max-width:var(--maxw);margin:auto;padding:0 var(--pad)}

/* ═══════════ CARD GRID ═══════════ */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.pcard{background:var(--paper);border:1px solid var(--line-light);border-radius:var(--r-lg);
  padding:26px;transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .5s var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:0 30px 50px -32px rgba(11,21,51,.4);
  border-color:rgba(46,91,234,.45)}
.pcard .ico{width:40px;height:40px;border-radius:12px;background:rgba(46,91,234,.14);
  display:grid;place-items:center;margin-bottom:18px}
.pcard .ico svg{width:20px;height:20px;stroke:var(--umber);fill:none;stroke-width:1.5}
.pcard h3{font-size:18.5px;margin-bottom:9px}
.pcard p{color:var(--ink-2);font-size:14.2px}

/* ═══════════ NUMBERED STEPS ═══════════ */
.steps{margin:48px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:16px;counter-reset:s}
.steps li{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:var(--r-lg);
  background:rgba(160,188,240,.16);border:1px solid var(--line-light);position:relative}
.steps .n{font-family:'Fraunces',serif;font-size:13px;letter-spacing:.1em;color:var(--brass);
  border-bottom:1px solid rgba(11,21,51,.14);padding-bottom:10px}
.steps h3{font-size:17.5px;margin-bottom:7px}
.steps p{color:var(--ink-2);font-size:13.8px}

/* ═══════════ FORM SECTION ═══════════ */
.pform{background:linear-gradient(172deg,#F4F8FF,#E3ECFB);padding:clamp(64px,8vw,112px) 0}
.pform .in{max-width:var(--maxw);margin:auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,68px);align-items:start}
.pform h2{font-size:clamp(28px,3.4vw,44px);margin-top:18px}
.pform .in > div > p{margin-top:16px;color:var(--ink-2);font-size:15.5px;max-width:40ch}

/* ═══════════ ABOUT-SPECIFIC ═══════════ */
.story{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.story .txt h2{font-size:clamp(28px,3.6vw,46px);margin-top:18px}
.story .txt p{margin-top:18px;color:var(--ink-2);font-size:16px;max-width:52ch}
.story .txt p:first-of-type{margin-top:22px}
.story .txt .pull{margin-top:26px;padding:20px 0 20px 24px;border-left:2px solid var(--brass);
  font-family:'Fraunces',serif;font-style:italic;font-size:18.5px;color:var(--umber);line-height:1.45}
.story .shot{border-radius:var(--r-xl);overflow:hidden;background:rgba(160,188,240,.2);padding:8px}
.story .shot .core{border-radius:calc(var(--r-xl) - 8px);overflow:hidden}
.story .shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.4;display:block;
  transition:transform 1.4s var(--ease2)}
.story .shot:hover img{transform:scale(1.04)}

/* ── value row ── */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.value{padding:28px;border-radius:var(--r-lg);background:rgba(160,188,240,.05);
  border:1px solid var(--line-dark)}
.value .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tan)}
.value h3{font-size:20px;color:var(--cream);margin:14px 0 9px}
.value p{font-size:14px;color:var(--ink-on-dark-dim)}

/* ── structure / ranks ── */
.ranks{margin-top:48px;border-top:1px solid var(--line-light)}
.rank{display:grid;grid-template-columns:150px 1fr;gap:26px;padding:24px 0;
  border-bottom:1px solid var(--line-light);align-items:start}
.rank .role{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
  font-weight:500;padding-top:4px}
.rank h3{font-size:19px;margin-bottom:7px}
.rank p{color:var(--ink-2);font-size:14.4px;max-width:64ch}

/* ── wide photo band ── */
.photoband{position:relative;overflow:hidden;min-height:clamp(280px,38vw,460px);display:grid;place-items:end}
.photoband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photoband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,10,28,.18) 0%,rgba(5,10,28,.55) 52%,rgba(5,10,28,.94) 100%)}
.photoband .cap{position:relative;z-index:2;max-width:var(--maxw);margin:auto;width:100%;
  padding:0 var(--pad) clamp(32px,4vw,52px);color:var(--cream)}
.photoband .cap .eyebrow{color:var(--sand);border:1px solid var(--brass-dim);
  background:rgba(46,91,234,.16);border-radius:99px;padding:5px 13px;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase}
.photoband .cap h2{font-size:clamp(26px,3.4vw,44px);margin-top:16px;color:var(--cream);max-width:22ch}

/* ── careers strip ── */
.careers{margin-top:48px;background:rgba(11,21,51,.045);border:1px solid var(--line-light);
  border-radius:var(--r-lg);padding:clamp(24px,3vw,38px);display:flex;gap:26px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.careers h3{font-size:21px}
.careers p{color:var(--ink-2);font-size:14.4px;margin-top:8px;max-width:52ch}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1100px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .pform .in,.story{grid-template-columns:1fr;gap:40px}
  .values{grid-template-columns:1fr}
}
@media (max-width:760px){
  .pgrid,.steps{grid-template-columns:1fr}
  .rank{grid-template-columns:1fr;gap:8px}
  .phero h1{font-size:clamp(30px,8.2vw,42px)}
  .navlinks a.on::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .phero-bg img{animation:none}
}