/* ═══════════════════════════════════
   HERO — full-width photo + text below
═══════════════════════════════════ */
.team-hero {
  margin-top: 155px;
  min-height: 520px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.team-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.team-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(48, 48, 48, 0.3), rgba(55, 54, 54, 0.564));
  z-index: 1;
}

.under-founder-video {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.under-founder-video video {
  width: 100%;
  display: block;
  max-height: 560px;
  object-fit: cover;
}

.team-hero-inner {
  position: relative;
  z-index: 2;
  padding: 80px 0;
  text-align: center;
}

.hero-left {
  max-width: 100%;
}

.hero-left .eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  display: block;
}

.hero-left h1 {
  text-shadow: 0 4px 12px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.6);
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.1;
  color: #fff;
  margin-bottom: 16px;
  padding-top: 210px;
  white-space: normal;
  text-align: center;
}

.hero-left h1 em {
  font-family: 'Outfit', sans-serif;
  font-style: normal;
  color: var(--accent2);
  font-weight: 700;
  text-transform: uppercase;
  -webkit-text-fill-color: var(--accent2);
}

.hero-left p {
  text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.6);
  color: rgba(255, 255, 255, .85);
  font-size: .92rem;
  line-height: 1.6;
  white-space: nowrap;
  text-align: center;
}

/* ═══════════════════════════════════
   SECTION DIVIDERS
═══════════════════════════════════ */
.section-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 60px 0 36px;
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.section-divider .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent2);
  flex-shrink: 0;
}

.section-divider h3 {
  font-family: var(--font-head);
  font-size: 1.45rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  white-space: nowrap;
}

[data-theme="dark"] .section-divider h3 {
  color: rgba(255, 255, 255, .88);
}

[data-theme="light"] .section-divider h3 {
  color: rgba(0, 0, 0, .75);
}

.section-divider.divider-left {
  justify-content: flex-start;
  padding: 36px 0 28px;
}

.section-divider.divider-left::before {
  display: none;
}

.section-divider.divider-left h3 {
  font-size: 1.5rem;
  letter-spacing: 4px;
  color: var(--accent2);
}

/* ═══════════════════════════════════
   TEAM SECTION & GRIDS — centered container, smaller cards
═══════════════════════════════════ */
.team-section {
  padding: 0 0 100px;
  background: var(--bg);
}

/* everything inside the team section sits in a centered, capped-width column */
.team-section > .wrap,
.team-section > div {
  max-width: 1040px;
  margin: 0 auto;
  padding-left: 5%;
  padding-right: 5%;
}

/* Leadership: 2-column, centered, smaller */
.founders-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}

/* Default team grid: 4 smaller cards per row */
.creative-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* ═══════════════════════════════════
   PORTRAIT CARD — smaller
═══════════════════════════════════ */
.pcard {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3/4;
  background: var(--card2);
  margin: 0;
  border-radius: 8px;
}

.pcard-photo-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 2.4rem;
  color: rgba(255, 255, 255, .15);
  transition: transform .55s cubic-bezier(.25, .46, .45, .94);
}

/* Open-position card: generic icon instead of initials/photo */
.pcard-open .pcard-photo-placeholder {
  font-size: 2.8rem;
  color: rgba(255, 255, 255, .18);
}

.position-open-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(168, 232, 50, .95);
  color: #0a0a0f;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.position-open-badge i {
  font-size: .72rem;
}

.pcard-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.25, .46, .45, .94);
}

.pcard:hover .pcard-photo,
.pcard:hover .pcard-photo-placeholder {
  transform: scale(1.07);
}

.pcard-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 22px 12px 12px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .92) 0%,
    rgba(0, 0, 0, .55) 50%,
    transparent 100%
  );
  transition: opacity .35s;
}

.pcard:hover .pcard-strip {
  opacity: 0;
}

.pcard-strip h3 {
  font-family: var(--font-head);
  font-size: 0.9rem;
  letter-spacing: 0.8px;
  color: #fff;
  margin: 0 0 2px;
}

.pcard-strip p {
  font-size: .58rem;
  color: rgba(255, 255, 255, .55);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
}

.pcard-hover {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
  overflow: hidden;
}

.pcard-hover-inner {
  background: rgba(168, 232, 50, .93);
  backdrop-filter: blur(4px);
  padding: 16px 14px 14px;
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}

.pcard:hover .pcard-hover {
  pointer-events: auto;
}

.pcard:hover .pcard-hover-inner {
  transform: translateY(0);
}

.pcard[data-color="orange"] .pcard-hover-inner {
  background: rgba(249, 115, 22, .92);
}

.pcard[data-color="blue"] .pcard-hover-inner {
  background: rgba(59, 130, 246, .92);
}

.pcard[data-color="purple"] .pcard-hover-inner {
  background: rgba(139, 92, 246, .92);
}

.pcard[data-color="teal"] .pcard-hover-inner {
  background: rgba(20, 184, 166, .92);
}

.pcard[data-color="red"] .pcard-hover-inner {
  background: rgba(239, 68, 68, .92);
}

.pcard[data-color="gold"] .pcard-hover-inner {
  background: rgba(234, 179, 8, .92);
}

.pcard[data-color="pink"] .pcard-hover-inner {
  background: rgba(236, 72, 153, .92);
}

.pcard[data-color="indigo"] .pcard-hover-inner {
  background: rgba(99, 102, 241, .92);
}

.pcard[data-color="sky"] .pcard-hover-inner {
  background: rgba(14, 165, 233, .92);
}

.pcard[data-color="rose"] .pcard-hover-inner {
  background: rgba(244, 63, 94, .92);
}

.pcard[data-color="amber"] .pcard-hover-inner {
  background: rgba(245, 158, 11, .92);
}

.pcard[data-color="emerald"] .pcard-hover-inner {
  background: rgba(16, 185, 129, .92);
}

.pcard[data-color="Dark Blue"] .pcard-hover-inner{
  background: rgb(36, 53, 100);
  
}

.pcard[data-color="gold"] .pcard-hover-inner,
.pcard[data-color="amber"] .pcard-hover-inner,
.pcard[data-color="green"] .pcard-hover-inner{
  --ht: #0a0a0f;
  --hm: rgba(0, 0, 0, .6);
  --hb: rgba(0, 0, 0, .2);
}

.phover-name {
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: 1px;
  color: var(--ht, #fff);
  margin: 0 0 2px;
  line-height: 1.1;
}

.phover-role {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--hm, rgba(255, 255, 255, .75));
  margin: 0 0 6px;
}

.phover-bio {
  font-size: .72rem;
  color: var(--ht, rgba(255, 255, 255, .9));
  line-height: 1.5;
  margin: 0 0 10px;
}

.phover-socials {
  display: flex;
  gap: 6px;
}

.phover-socials a {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--hb, rgba(255, 255, 255, .4));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  color: var(--ht, rgba(255, 255, 255, .85));
  transition: background .2s, border-color .2s;
}

.phover-socials a:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .8);
}

.pcard::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  z-index: 4;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.pcard[data-color="orange"]::after {
  background: var(--accent2);
}

.pcard[data-color="blue"]::after {
  background: #3b82f6;
}

.pcard[data-color="purple"]::after {
  background: #8b5cf6;
}

.pcard[data-color="teal"]::after {
  background: #14b8a6;
}

.pcard[data-color="red"]::after {
  background: #ef4444;
}

.pcard[data-color="gold"]::after {
  background: #eab308;
}

.pcard[data-color="pink"]::after {
  background: #ec4899;
}

.pcard[data-color="indigo"]::after {
  background: #6366f1;
}

.pcard[data-color="emerald"]::after {
  background: #10b981;
}

.pcard[data-color="sky"]::after {
  background: #0ea5e9;
}

.pcard[data-color="rose"]::after {
  background: #f43f5e;
}

.pcard[data-color="amber"]::after {
  background: #f59e0b;
}

.pcard[data-color="Dark Blue"]::after {
  background: rgb(36, 53, 100);
}

.pcard:hover::after {
  transform: scaleX(1);
}

/* ═══════════════════════════════════
   JOIN CTA BANNER
═══════════════════════════════════ */
.join-cta {
  text-align: center;
  padding: 48px 5% 52px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.join-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(168, 232, 50, .05) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.join-cta h2 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: 1px;
  color: var(--text);
  margin-bottom: 10px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.join-cta h2 em {
  font-family: 'Outfit', sans-serif;
  font-style: normal;
  color: var(--accent2);
  font-weight: 700;
  text-transform: uppercase;
  -webkit-text-fill-color: var(--accent2);
}

.join-cta p {
  color: var(--muted);
  font-size: .92rem;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.join-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--dark);
  padding: 11px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .88rem;
  transition: all .3s;
}

.btn-primary:hover {
  background: #bef54a;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(168, 232, 50, .3);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 11px 26px;
  border-radius: 999px;
  font-weight: 500;
  font-size: .88rem;
  transition: all .3s;
}

.btn-ghost:hover {
  border-color: var(--muted);
  color: var(--text);
}

/* ═══════════════════════════════════
   SPECIAL TEAM GRIDS
   Social Media Executives / Video Editors / Photographers
═══════════════════════════════════ */
.special-two-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

/* Three-card sections: keep all three together and centered on desktop.
   Two-card sections (Photographers / Videographers) remain centered. */
@media (min-width: 961px) {
  .sme-grid {
    grid-template-columns: repeat(3, 220px);
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    justify-content: center;
  }

  .sme-grid .pcard {
    width: 220px;
  }

  /* The photographer section has only two cards. */
  .sme-grid:not(:has(.pcard:nth-child(3))) {
    grid-template-columns: repeat(2, 220px);
  }
}

/* Make these grids reliably visible even if the global reveal animation
   has not yet added its active class. */
.sme-grid.reveal {
  visibility: visible;
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════
   FOUR-CARD ROWS — 4 across
   Graphic Designers
═══════════════════════════════════ */
.gd-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.gd-grid .pcard {
  width: 100%;
}

/* ═══════════════════════════════════
   RESPONSIVE — main grids
═══════════════════════════════════ */
@media (max-width: 960px) {
  .creative-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-bg {
    height: 380px;
  }

  /* All 3-card special sections use two columns on tablet.
     The third card is centered on the second row. */
  .sme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .sme-grid .pcard {
    width: 100%;
  }

  .sme-grid .pcard:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 10px) / 2);
  }

  /* The photographer section has only two cards, so both stay in one row. */
  .sme-grid:has(.pcard:nth-child(2)):not(:has(.pcard:nth-child(3))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .team-hero {
    margin-top: 120px;
  }

  .hero-bg {
    height: 300px;
  }

  .hero-left p {
    text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.6);
    white-space: normal;
    text-align: left;
  }

  .join-cta h2 {
    white-space: normal;
  }

  .founders-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
}

@media (max-width: 500px) {
  .creative-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .sme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .sme-grid .pcard:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 10px) / 2);
  }
}

/* ══════════════════════════════════════
   PREMIUM LIGHT MODE OVERRIDES
══════════════════════════════════════ */
[data-theme="light"] .team-section {
  background: #f1f5f9;
}

[data-theme="light"] .pcard {
  box-shadow: 0 4px 20px rgba(15,23,42,0.09);
}

[data-theme="light"] .pcard:hover {
  box-shadow: 0 14px 40px rgba(15,23,42,0.14);
}

[data-theme="light"] .section-divider h3 {
  color: #0f172a;
}

[data-theme="light"] .section-divider::before,
[data-theme="light"] .section-divider::after {
  background: rgba(15,23,42,0.12);
}

[data-theme="light"] .join-cta {
  background: linear-gradient(135deg, #f1f5f9 0%, #e8eef8 100%);
  border-top: 1px solid rgba(15,23,42,0.08);
}

/* ─── MOBILE FIXES ─── */
@media (max-width: 500px) {
  .team-hero {
    margin-top: 130px !important;
    padding-bottom: 40px !important;
  }

  .pcard {
    border-radius: 10px !important;
  }

  .pcard-photo {
    height: 100% !important;
    object-fit: cover;
    object-position: top;
  }

  .creative-grid {
    gap: 12px !important;
  }
}

@media (max-width: 768px) {
  .pcard-strip h3 {
    font-size: 0.82rem;
  }

  .pcard-strip p {
    font-size: 0.55rem;
    letter-spacing: 0.4px;
  }

  .phover-name {
    font-size: 0.92rem;
  }

  .phover-role {
    font-size: 0.5rem;
    letter-spacing: 0.4px;
    margin-bottom: 5px;
  }

  .phover-bio {
    font-size: 0.62rem;
    line-height: 1.3;
    margin-bottom: 7px;
  }

  .phover-socials {
    gap: 4px;
  }

  .phover-socials a {
    width: 22px;
    height: 22px;
    font-size: 0.64rem;
  }

  .pcard-hover-inner {
    padding: 10px;
  }
}

@media (max-width: 768px) {
  .section-divider {
    padding: 24px 0 16px !important;
    gap: 12px !important;
  }

  .section-divider h3 {
    font-size: 1.1rem !important;
    letter-spacing: 2px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .section-divider.divider-left {
    justify-content: center !important;
  }

  .section-divider.divider-left::before {
    display: block !important;
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }
}

@media (max-width: 640px) {
  .join-cta {
    padding: 32px 20px 32px !important;
  }

  .join-cta h2 {
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }

  .join-cta p {
    font-size: 0.9rem !important;
    padding: 0 10px;
    margin-bottom: 20px !important;
  }

  .join-btns {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .join-btns a {
    width: 100% !important;
    max-width: 260px !important;
    justify-content: center !important;
  }
}

/* Core Team — 3 smaller cards centered on desktop */
@media (min-width: 961px) {
  .core-team-grid {
    grid-template-columns: repeat(3, 220px);
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    justify-content: center;
  }

  .core-team-grid .pcard {
    width: 220px;
  }
}

/* Keep the page from creating horizontal scrolling */
html,
body {
  overflow-x: hidden;
}

/* ═══════════════════════════════════
   DESKTOP CENTERING — Core Team / Social Media Executives /
   Video Editors / Photographers
   (higher specificity beats the inline !important rules
   in the HTML <head>, without editing the HTML)
═══════════════════════════════════ */
@media (min-width: 961px) {
  .team-section .core-team-grid,
  .team-section .social-executives-grid,
  .team-section .video-editors-grid {
    grid-template-columns: repeat(4, 220px) !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }

  .team-section .photographers-grid {
    grid-template-columns: repeat(2, 220px) !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }

  .team-section .core-team-grid .pcard,
  .team-section .social-executives-grid .pcard,
  .team-section .video-editors-grid .pcard,
  .team-section .photographers-grid .pcard {
    width: 220px !important;
  }
}

/* Social Media Executives & Video Editors have only 3 cards —
   use a 3-column track so the group centers correctly
   (overrides the 4-column rule above it, desktop only) */
@media (min-width: 961px) {
  .team-section .social-executives-grid,
  .team-section .video-editors-grid {
    grid-template-columns: repeat(3, 220px) !important;
  }
}