/* JettSEO — About / Team page. Scoped under .team-page.
   Uses the site design system verbatim: Inter, brand blue→purple gradient,
   navy text, the same container metrics (1200 / 24px), section rhythm (96px),
   type scale (--fs-*), radii and shadow tokens from style.css :root.
   Layout ported from the "JettSEO Team Page" Claude Design; header + footer
   are the shared site chrome. */

.team-page {
    --tp-btn-grad: var(--c-btn-grad);
    font-family: var(--f-sans);
    color: var(--c-text);
    background: #fff;
    overflow-x: hidden;
}
.team-page *,
.team-page *::before,
.team-page *::after { box-sizing: border-box; }

/* Same width + gutters as the site .container */
.tp-wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* Shared type — matches home headings/eyebrow/lead */
.tp-eyebrow { display: inline-block; font-family: var(--f-sans); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.18em; color: var(--c-grad-to); text-transform: uppercase; }
.tp-h1 { font-family: var(--f-display); font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 24px; color: var(--c-text); }
.tp-h2 { font-family: var(--f-display); font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; margin: 0; color: var(--c-text); }
.tp-grad { background: var(--c-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tp-grad-light { background: linear-gradient(120deg, #8ab4ff, #d3a9ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

.tp-btn { font-family: var(--f-sans); font-weight: 600; font-size: var(--fs-btn); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-btn); transition: transform var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease); }
.tp-btn:hover { transform: translateY(-2px); }
.tp-btn-primary { color: #fff; background: var(--tp-btn-grad); padding: 15px 28px; box-shadow: var(--shadow-blue); }
.tp-btn-primary:hover { box-shadow: 0 16px 32px rgba(147,51,234,.28); }
.tp-btn-white { color: var(--c-blue); background: #fff; padding: 16px 30px; box-shadow: var(--shadow-lg); }

/* Hero — same top gradient + high title position as the home hero */
.tp-hero { background: linear-gradient(to bottom, rgba(248,250,252,.5) 0%, #fff 100%); }
.tp-hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; padding-top: 40px; padding-bottom: 96px; }
.tp-hero-lead { font-size: var(--fs-h4); line-height: 1.6; color: var(--c-text-soft); margin: 0 0 34px; max-width: 36rem; }
.tp-hero-media { position: relative; }
.tp-hero-photo { aspect-ratio: 954/1180; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-bg-soft); box-shadow: var(--shadow-lg); }
.tp-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }

/* Human expertise band — navy (site --c-bg-dark) */
.tp-band { background: linear-gradient(120deg, #0A0E27 0%, #171d3e 58%, #241147 100%); position: relative; overflow: hidden; }
.tp-band-glow { position: absolute; top: -120px; right: -80px; width: 420px; height: 420px; border-radius: var(--radius-pill); background: radial-gradient(circle, rgba(147,51,234,0.5), rgba(147,51,234,0) 70%); }
.tp-band-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding-top: 96px; padding-bottom: 96px; position: relative; z-index: 1; }
.tp-band-media { border-radius: var(--radius-lg); overflow: hidden; background: #171d3e; box-shadow: 0 34px 74px -24px rgba(0,0,0,0.6); }
.tp-band-media img { width: 100%; display: block; }
.tp-eyebrow-light { color: #c4b5fd; margin-bottom: 18px; }
.tp-h2-light { color: #fff; }
.tp-band-copy h2 { margin-bottom: 20px; line-height: 1.1; }
.tp-band-lead { font-size: var(--fs-h4); line-height: 1.6; color: rgba(255,255,255,0.82); margin: 0; max-width: 520px; }

/* Leadership */
.tp-lead { padding-top: 96px; padding-bottom: 0; }
.tp-lead .tp-eyebrow { margin-bottom: 36px; }
.tp-lead-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 52px; align-items: start; }
.tp-lead-photo { aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-bg-soft); box-shadow: var(--shadow-lg); position: sticky; top: 96px; }
.tp-lead-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.tp-lead-copy h2 { margin-bottom: 6px; }
.tp-lead-role { font-size: var(--fs-h4); font-weight: 600; color: var(--c-blue); margin-bottom: 6px; }
.tp-lead-cred { font-size: var(--fs-small); font-weight: 500; color: var(--c-text-muted); margin-bottom: 24px; }
.tp-lead-p { font-size: var(--fs-h4); line-height: 1.55; color: var(--c-text-soft); margin: 0 0 20px; max-width: 580px; }
.tp-quote { border-left: 3px solid transparent; border-image: var(--c-grad) 1; padding-left: 20px; margin: 28px 0 0; font-size: var(--fs-h3); line-height: 1.4; font-weight: 600; color: var(--c-text); font-style: italic; max-width: 580px; }

/* Award divider band */
.tp-award { margin-top: 72px; }
.tp-award-head { text-align: center; padding-bottom: 16px; }
.tp-award-eyebrow { margin-bottom: 8px; }
.tp-award-title { font-family: var(--f-display); font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -0.02em; font-weight: 700; margin: 0; color: var(--c-text); }
.tp-award-photo { width: 100%; display: block; margin-top: 24px; }

/* Team grid */
.tp-team { padding-top: 96px; padding-bottom: 96px; }
.tp-team .tp-eyebrow { margin-bottom: 14px; }
.tp-team h2 { margin-bottom: 12px; }
.tp-team-lead { font-size: var(--fs-h4); line-height: 1.55; color: var(--c-text-muted); margin: 0 0 48px; max-width: 560px; }
.tp-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tp-card { border-radius: var(--radius-card); padding: 0; background: #fff; box-shadow: var(--shadow-card); transition: transform var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease); }
.tp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.tp-card-inner { border: 1px solid var(--c-border-soft); border-radius: var(--radius-card); overflow: hidden; background: #fff; height: 100%; }
.tp-card-ai { padding: 2px; background: var(--c-btn-grad); box-shadow: var(--shadow-blue); }
.tp-card-ai .tp-card-inner { border: 0; }
.tp-card-photo { aspect-ratio: 1/1; background: var(--c-bg-soft); position: relative; }
.tp-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.tp-ai-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.92); backdrop-filter: blur(4px); border-radius: var(--radius-pill); padding: 5px 11px; font-size: 10.5px; font-weight: 700; color: var(--c-blue); letter-spacing: 0.04em; box-shadow: var(--shadow-sm); }
.tp-card-body { padding: 22px 22px 24px; }
.tp-card-name { font-family: var(--f-display); font-size: var(--fs-h4); font-weight: 700; color: var(--c-text); line-height: 1.2; margin-bottom: 4px; }
.tp-card-role { font-size: var(--fs-small); font-weight: 600; color: var(--c-blue); margin-bottom: 14px; }
.tp-card-line { font-size: var(--fs-small); line-height: 1.5; color: var(--c-text-soft); font-style: italic; border-top: 1px solid var(--c-border-soft); padding-top: 14px; }

/* Culture */
.tp-culture { padding-top: 96px; padding-bottom: 96px; }
.tp-culture-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 52px; align-items: center; }
.tp-culture-copy h2 { margin-bottom: 16px; }
.tp-culture-copy .tp-eyebrow { margin-bottom: 14px; }
.tp-culture-copy p { font-size: var(--fs-h4); line-height: 1.55; color: var(--c-text-soft); margin: 0; max-width: 480px; }
.tp-culture-media { border-radius: var(--radius-lg); overflow: hidden; background: var(--c-bg-soft); box-shadow: var(--shadow-lg); }
.tp-culture-media img { width: 100%; display: block; }

/* Book CTA */
.tp-cta { background: linear-gradient(120deg, #2563eb 0%, #6d28d9 55%, #9333ea 100%); }
.tp-cta-inner { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 48px; align-items: center; padding-top: 96px; padding-bottom: 96px; }
.tp-cta-title { font-family: var(--f-display); font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 16px; color: #fff; max-width: 620px; }
.tp-cta-lead { font-size: var(--fs-h4); line-height: 1.55; color: rgba(255,255,255,0.85); margin: 0 0 32px; max-width: 560px; }
.tp-cta-list { display: flex; flex-direction: column; gap: 14px; }
.tp-cta-item { display: flex; align-items: center; gap: 14px; color: #fff; font-size: 15px; font-weight: 500; }
.tp-cta-item span { font-size: 20px; }

/* Scroll-reveal (reuses the site .reveal -> .visible via main.js) */
.team-page .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--motion-slow) var(--ease), transform var(--motion-slow) var(--ease); }
.team-page .reveal.visible { opacity: 1; transform: translateY(0); }
.team-page .tp-team-grid .tp-card:nth-child(3n+2) { transition-delay: 90ms; }
.team-page .tp-team-grid .tp-card:nth-child(3n+3) { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
    .team-page .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Responsive */
@media (max-width: 900px) {
    .tp-hero-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 24px; padding-bottom: 64px; }
    .tp-hero-media { max-width: 460px; }
    .tp-band-inner { grid-template-columns: 1fr; gap: 36px; padding-top: 72px; padding-bottom: 72px; }
    .tp-band-media { order: 2; }
    .tp-lead { padding-top: 72px; }
    .tp-lead-grid { grid-template-columns: 1fr; gap: 28px; }
    .tp-lead-photo { position: static; max-width: 360px; }
    .tp-team, .tp-culture, .tp-cta-inner { padding-top: 72px; padding-bottom: 72px; }
    .tp-team-grid { grid-template-columns: repeat(2, 1fr); }
    .tp-team-grid .tp-card:nth-child(3n+2),
    .tp-team-grid .tp-card:nth-child(3n+3) { transition-delay: 0ms; }
    .tp-culture-grid { grid-template-columns: 1fr; gap: 32px; }
    .tp-cta-inner { grid-template-columns: 1fr; gap: 32px; }
    .tp-award { margin-top: 56px; }
}
@media (max-width: 560px) {
    .tp-wrap { padding-left: 18px; padding-right: 18px; }
    .tp-team-grid { grid-template-columns: 1fr; }
}