/* Katalys Media — team page. Concept: "Living map". Contour lines = mapping, flood and planning work; bars = the brand. */

/* Shared living-map pieces (grain, duotone, map canvas, ticker, live bars) are in site.css. */

/* ---------- Hero ---------- */
.hero-map { position: relative; min-height: min(100vh, 860px); min-height: min(100svh, 860px); background: var(--navy-900); color: var(--white); overflow: hidden; display: grid; grid-template-rows: 1fr auto; }
.hero-map::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .09; mix-blend-mode: overlay; pointer-events: none; }
.hero-map .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-7); align-items: center; padding-block: var(--space-8); }
.hero-map .eyebrow { color: var(--gold-400); }
.kinetic { font: 800 clamp(3rem, 1.5rem + 6vw, 6.5rem)/.95 var(--font-display); letter-spacing: -.045em; margin-block: var(--space-4) var(--space-5); }
.kinetic span { display: inline-block; }
.kinetic span:nth-child(2) { --i: 1; } .kinetic span:nth-child(3) { --i: 2; } .kinetic span:nth-child(4) { --i: 3; }
.kinetic .gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-map .lede { color: var(--navy-200); }
.cue { margin-top: var(--space-7); display: inline-flex; align-items: center; gap: 12px; font: 600 var(--text-xs)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--navy-200); text-decoration: none; }
.cue i { width: 1px; height: 40px; background: linear-gradient(var(--gold-400), transparent); }

.trio { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; height: 460px; }
.trio figure { position: relative; margin: 0; will-change: transform; }
.trio figure:nth-child(1) { margin-bottom: 0; --i: 0; }
.trio figure:nth-child(2) { margin-bottom: 70px; --i: 1; }
.trio figure:nth-child(3) { margin-bottom: 150px; --i: 2; }
.trio img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; border-radius: var(--radius-sm); }
.trio figure:hover img { filter: none; }
.trio figcaption { position: absolute; z-index: 1; left: 0; right: 0; top: 100%; margin-top: 26px; padding-inline: 12px; font: 700 13px/1.25 var(--font-display); }
.trio figcaption small { display: block; font: 600 10px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-400); }
.trio figure::before { content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 12px); height: 600px; background: linear-gradient(#22344f, rgba(34, 52, 79, 0) 75%); border-top: 2px solid var(--gold-400); }

/* ---------- Scroll story ---------- */
.story { position: relative; background: var(--paper); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
.story-visual { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
.story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame { position: relative; width: min(100%, 400px); aspect-ratio: 4 / 5; }
.frame::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .14; mix-blend-mode: overlay; pointer-events: none; border-radius: var(--radius-md); }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border-radius: var(--radius-md); opacity: 0; transform: scale(1.06); transition: opacity 600ms ease, transform 900ms var(--ease-out-expo); box-shadow: var(--shadow-card); }
.frame img.on { opacity: 1; transform: none; }
.frame-tag { position: absolute; z-index: 2; left: -20px; bottom: 28px; background: var(--navy-800); color: var(--white); padding: 12px 16px; border-left: 4px solid var(--gold-400); font: 700 15px/1.25 var(--font-display); min-width: 220px; }
.frame-tag small { display: block; font: 600 10px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-400); }
.rail { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 300px; width: 2px; background: var(--line); }
.rail i { position: absolute; inset: 0 0 auto; height: var(--fill, 33%); background: var(--gold-600); transition: height 600ms var(--ease-out-expo); }
.rail b { position: absolute; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-strong); transition: background-color 300ms ease, border-color 300ms ease; }
.rail b:nth-of-type(1) { top: 0; } .rail b:nth-of-type(2) { top: calc(50% - 6px); } .rail b:nth-of-type(3) { bottom: 0; }
.rail b.on { background: var(--gold-400); border-color: var(--gold-600); }

.step { min-height: 100vh; display: grid; align-content: center; gap: var(--space-4); padding-block: var(--space-8); }
.step .stage { font: 600 var(--text-xs)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-700); display: flex; align-items: center; gap: 12px; }
.step .stage::before { content: attr(data-n); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--navy-800); font: 800 15px/1 var(--font-display); color: var(--ink); letter-spacing: 0; }
.step h2 { font: 800 clamp(2rem, 1.2rem + 3vw, 3.5rem)/1.02 var(--font-display); letter-spacing: -.035em; max-width: 14ch; }
.step .who { font: 700 var(--text-h3)/1.2 var(--font-display); border-top: 2px solid var(--navy-800); padding-top: var(--space-4); margin-top: var(--space-3); }
.step .who small { display: block; font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--muted); margin-top: 4px; }
.step p.bio { color: #3c4659; max-width: 52ch; }
.step .facts2 { display: grid; grid-template-columns: 110px 1fr; font-size: var(--text-sm); border-top: 1px solid var(--line); }
.step .facts2 dt, .step .facts2 dd { padding: 10px 0; border-bottom: 1px solid var(--line); }
.step .facts2 dt { font: 600 11px/1.6 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.step .inline-photo { display: none; }

/* ---------- CTA with live bars ---------- */
.cta-live { position: relative; background: var(--navy-800); color: var(--white); overflow: hidden; padding-block: clamp(80px, 10vw, 140px); }
.cta-live .container { position: relative; display: grid; gap: var(--space-5); justify-items: start; }
.cta-live h2 { font: 800 clamp(2.5rem, 1.5rem + 4vw, 5rem)/1 var(--font-display); letter-spacing: -.04em; max-width: 14ch; }
.cta-live p { color: var(--navy-200); }

/* ---------- Motion (only when the visitor allows it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .kinetic span { animation: word-up 900ms var(--ease-out-expo) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
  .trio figure { animation: rise 1100ms var(--ease-out-expo) both; animation-delay: calc(var(--i) * 140ms + 500ms); }
}
@keyframes rise { from { opacity: 0; transform: translateY(60px); } }

@media (max-width: 900px) {
  .hero-map .container, .story-grid { grid-template-columns: 1fr; }
  .trio { height: auto; margin-bottom: 72px; }
  .trio figure:nth-child(n) { margin-bottom: 0; }
  .trio figure::before { display: none; }
  .story-visual { display: none; }
  .step { min-height: 0; padding-block: var(--space-7); border-top: 1px solid var(--line); }
  .step .inline-photo { display: block; width: 160px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; border-radius: var(--radius-sm); }
}