/* ════════════════════════════════════════════════════════════════════════ Leadership — cinematic scroll-snap pages (Views/leadership.php, content/leadership-beats.php). Loaded only on /leadership* (page-scoped). Scoped under .leadership-* / html.is-leadership so nothing leaks into the rest of the site. Tokens from tokens.css; the accent is the cyan thread (#27E1FF) via [data-accent] on — the noted exception to the cyan default — with ember on the human beat. Buttons/cue reuse app.css. Root scroll-snap (mandatory) is switched on app-wide by initScrollSnap() on first interaction (.snap-on). ════════════════════════════════════════════════════════════════════════ */ html.is-leadership.snap-on{scroll-snap-type:y mandatory;} @media (max-height:680px){ html.is-leadership.snap-on{scroll-snap-type:y proximity;} } html.is-leadership .site-footer{scroll-snap-align:start;} /* ── Beat shell ─────────────────────────────────────────────────────────── */ .leadership-beat{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center; padding-block:var(--s-9);overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;} .leadership-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-color:var(--ink-900);} .leadership-grade{position:absolute;inset:0;z-index:1; background:radial-gradient(120% 90% at 16% 100%, rgba(0,0,0,.5), transparent 55%), linear-gradient(90deg, rgba(10,11,13,.9) 0%, rgba(10,11,13,.55) 45%, rgba(10,11,13,.2) 100%);} .leadership-beat-inner{position:relative;z-index:2;width:100%;} /* ── Typography ─────────────────────────────────────────────────────────── */ .leadership-eyebrow{font-family:var(--font-mono);font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase; color:var(--accent);margin:0 0 var(--s-4);} .leadership-h1{font:600 var(--t-display-xl)/1.03 var(--font-display);letter-spacing:-.02em;margin:0 0 var(--s-4);color:var(--on-ink-hi);max-width:16ch;} .leadership-h2{font:600 var(--t-h1)/1.05 var(--font-display);letter-spacing:-.02em;margin:0 0 var(--s-4);color:var(--on-ink-hi);max-width:20ch;} .leadership-sub{font-size:var(--t-body-lg);line-height:1.5;color:var(--on-ink-mid);margin:0;max-width:48ch;} .leadership-body{font-size:var(--t-body);line-height:1.6;color:var(--on-ink-mid);margin:0;max-width:54ch;} /* ── Picture-beside-service (two-column; stacks picture-first on mobile) ──── */ .leadership-beat-inner--split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,4vw,64px);align-items:center;} .leadership-pic{position:relative;} .leadership-pic img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block; border-radius:var(--r-md);border:var(--b-hairline) solid var(--ink-700);background:var(--ink-800); box-shadow:0 24px 60px rgba(0,0,0,.45);} .leadership-service-name{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase; color:var(--on-ink-mid);margin:0 0 var(--s-2);} .leadership-service-line{margin-bottom:var(--s-4);} /* ── Facts (Feeds first / Does / Powers / Proof …) ──────────────────────── */ .leadership-facts{margin:var(--s-5) 0 0;max-width:54ch;} .leadership-fact{display:grid;grid-template-columns:minmax(120px,12ch) 1fr;gap:14px;padding:10px 0; border-top:var(--b-hairline) solid var(--ink-700);} .leadership-fact dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);} .leadership-fact dd{margin:0;color:var(--on-ink-hi);font-size:.95rem;line-height:1.4;} .leadership-link{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s-5); font:600 var(--t-body)/1 var(--font-text);color:var(--accent);text-decoration:none;} .leadership-link span{transition:transform var(--dur) var(--ease-standard);} .leadership-link:hover span{transform:translateX(4px);} /* ── Connect ────────────────────────────────────────────────────────────── */ .leadership-ctas{margin-top:var(--s-7);} .leadership-credo{margin-top:var(--s-6);font-size:var(--t-caption);color:var(--on-ink-mid);line-height:1.6;max-width:52ch;} .leadership-cue{z-index:3;} /* ── Progress rail — fixed, right; real in-page anchors (work without JS) ── */ .leadership-rail{position:fixed;right:clamp(10px,2.4vw,30px);top:50%;transform:translateY(-50%);z-index:var(--z-sticky); display:flex;flex-direction:column;align-items:center;} .leadership-rail-line{position:absolute;top:6px;bottom:6px;width:1px;background:var(--ink-700);} .leadership-rail-fill{position:absolute;top:6px;width:1px;height:0;background:var(--accent);box-shadow:0 0 8px var(--accent); transition:height var(--dur-slow) var(--ease-standard),background var(--dur-slow) var(--ease-standard);} .leadership-dot{position:relative;width:26px;height:28px;display:flex;align-items:center;justify-content:center;text-decoration:none;} .leadership-dot i{width:7px;height:7px;border-radius:50%;background:var(--ink-600);border:1px solid var(--ink-700); transition:transform var(--dur) var(--ease-standard),background var(--dur) var(--ease-standard),border-color var(--dur) var(--ease-standard),box-shadow var(--dur) var(--ease-standard);} .leadership-dot.is-current i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent);transform:scale(1.25);} .leadership-dot-label{position:absolute;right:32px;white-space:nowrap;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--on-ink-mid);opacity:0;transform:translateX(6px); transition:opacity var(--dur) var(--ease-standard),transform var(--dur) var(--ease-standard);pointer-events:none;} .leadership-dot:hover .leadership-dot-label,.leadership-dot:focus-visible .leadership-dot-label,.leadership-dot.is-current .leadership-dot-label{opacity:1;transform:none;} /* ── Reveal: self-contained; first beat ships active so it paints at once. With no JS the html.js gate never applies, so all content is visible. ─── */ html.js .leadership-content{opacity:0;transform:translateY(var(--reveal-y)); transition:opacity var(--dur-slow) var(--ease-cine),transform var(--dur-slow) var(--ease-cine);} html.js .leadership-beat.is-active .leadership-content{opacity:1;transform:none;} /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width:880px){ .leadership-beat-inner--split{grid-template-columns:1fr;gap:var(--s-6);} } @media (max-width:760px){ .leadership-rail{right:10px;} .leadership-dot-label{display:none;} /* Reserve a gutter so wrapped content never runs under the fixed rail. */ .leadership-content{padding-right:clamp(40px,10vw,48px);} } @media (prefers-reduced-motion:reduce){ html.is-leadership{scroll-snap-type:none;} .leadership-content{opacity:1!important;transform:none!important;} .leadership-rail-fill{transition:none;} } html.no-motion.is-leadership{scroll-snap-type:none;} html.no-motion.is-leadership .leadership-content{opacity:1;transform:none;} /* ════════════════════════════════════════════════════════════════════════ Team roster beat — the nine as ONE scannable cinematic grid (replaces the nine full-screen picture-beside sections). One content beat between thesis and the human beat: auto-height, snaps to its top, never traps the wheel. ════════════════════════════════════════════════════════════════════════ */ .leadership-beat--team{align-items:flex-start;min-height:100svh;height:auto; scroll-snap-stop:normal;background:var(--ink-900);} html.js .leadership-beat--team .leadership-content{opacity:1;transform:none;width:100%;} .leadership-roster-intro{max-width:60ch;margin-bottom:var(--s-7);} .leadership-roster{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,24px);} @media (max-width:880px){ .leadership-roster{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:560px){ .leadership-roster{grid-template-columns:1fr;} } .leadership-card{position:relative;display:flex;flex-direction:column;overflow:hidden; background:var(--ink-800);border:var(--b-hairline) solid var(--ink-700);border-radius:var(--r-md); transition:transform var(--dur) var(--ease-standard),border-color var(--dur) var(--ease-standard),box-shadow var(--dur) var(--ease-standard);} .leadership-card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;z-index:2;background:var(--ink-700); transition:background var(--dur) var(--ease-standard),box-shadow var(--dur) var(--ease-standard);} /* MD + CEO carry a subtle persistent cyan rule — 'the company’s word' / 'the whole system'. */ .leadership-card:nth-child(1)::before,.leadership-card:nth-child(2)::before{background:rgba(39,225,255,.45);} .leadership-card-pic{margin:0;overflow:hidden;background:var(--ink-900);} .leadership-card-pic img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover; filter:grayscale(.18);transition:filter var(--dur-slow) var(--ease-standard),transform var(--dur-slow) var(--ease-standard);} .leadership-card-role{font-family:var(--font-mono);font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase; color:var(--accent);margin:var(--s-5) var(--s-5) var(--s-2);} .leadership-card-name{font:600 var(--t-h3)/1.12 var(--font-display);letter-spacing:-.01em;margin:0 var(--s-5) var(--s-3);} .leadership-card-name a{color:var(--on-ink-hi);text-decoration:none;transition:color var(--dur) var(--ease-standard);} .leadership-card-name a:hover{color:var(--accent);} .leadership-card-name a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;} .leadership-card-owns{font-family:var(--font-mono);font-size:var(--t-caption);letter-spacing:.04em;color:var(--on-ink-hi); margin:0 var(--s-5) var(--s-3);padding-top:var(--s-3);border-top:var(--b-hairline) solid var(--ink-700);} .leadership-card-statement{font-size:var(--t-caption);line-height:1.55;color:var(--on-ink-mid);margin:0 var(--s-5) var(--s-5);} @media (hover:hover){ .leadership-card:hover,.leadership-card:focus-within{transform:translateY(-4px);border-color:var(--ink-600); box-shadow:0 0 0 1px var(--accent),0 18px 40px rgba(0,0,0,.45);} .leadership-card:hover::before,.leadership-card:focus-within::before{background:var(--accent);box-shadow:0 0 12px rgba(39,225,255,.55);} .leadership-card:hover .leadership-card-pic img,.leadership-card:focus-within .leadership-card-pic img{filter:none;transform:scale(1.03);} } /* Per-card cascade reveal — stagger carried in --lead-delay so hover stays instant. */ html.js .leadership-card{opacity:0;transform:translateY(var(--reveal-y)); transition:opacity var(--dur-slow) var(--ease-cine) var(--lead-delay,0ms),transform var(--dur-slow) var(--ease-cine) var(--lead-delay,0ms), border-color var(--dur) var(--ease-standard),box-shadow var(--dur) var(--ease-standard);} html.js .leadership-beat--team.is-active .leadership-card{opacity:1;transform:none;} .leadership-card:nth-child(2){--lead-delay:60ms;}.leadership-card:nth-child(3){--lead-delay:120ms;} .leadership-card:nth-child(4){--lead-delay:180ms;}.leadership-card:nth-child(5){--lead-delay:240ms;} .leadership-card:nth-child(6){--lead-delay:300ms;}.leadership-card:nth-child(7){--lead-delay:360ms;} .leadership-card:nth-child(8){--lead-delay:420ms;}.leadership-card:nth-child(9){--lead-delay:480ms;} @media (hover:hover){ .leadership-card:hover,.leadership-card:focus-within{--lead-delay:0ms;} } @media (prefers-reduced-motion:reduce){ html.js .leadership-card{opacity:1;transform:none;transition:none;} .leadership-card-pic img{transition:none;} } html.no-motion.is-leadership .leadership-card{opacity:1;transform:none;transition:none;}