/* ============================================================
   DESIGN TOKENS
============================================================ */:root {
  --ink:        #0d0f13;
  --ink-mid:    #1c2128;
  --ink-muted:  #767c88;
  --ink-ghost:  rgba(13, 15, 19, 0.08);
  --paper:      #ffffff;
  --paper-tint: #f7f7f8;
  --accent:     #111318;
  --accent-dim: rgba(17, 19, 24, 0.72);

  --font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "DM Sans", ui-sans-serif, system-ui, sans-serif;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  --header-h: 80px;
  --pad-x: clamp(20px, 5vw, 72px);
}a {
  color: inherit;
  text-decoration: none;
}/* Reduce motion for users who prefer it *//* LOADER *//* ============================================================
   HEADER
============================================================ */.nav-action {
  color: #ffffff;
  border-color: rgba(255,255,255,0.4);
}.brand {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      /* Smooth scale on hover/tap */
      transition: transform 0.2s ease;
    }.brand:active {
      transform: scale(0.95);
    }.brand img {
      display: block;
      width: 100px;
      height: auto; /* Changed to auto to maintain aspect ratio naturally */
      max-height: 40px;
      object-fit: contain;
    }/* Fallback logo text styling if image fails to load */.nav-action-wrapper {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 16px;
    }.nav-action {
      display: inline-flex;
      align-items: center;
      height: 40px;
      padding: 0 24px;
      border: 1.5px solid rgba(17, 19, 24, 0.2);
      border-radius: 999px;
      font-family: var(--font-display);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink);
      background: transparent;
      backdrop-filter: blur(4px);
      text-decoration: none;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.3s var(--ease-out-expo);
    }/* Interactive button hover & active states */.nav-action:hover {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    }.nav-action:active {
      transform: translateY(1px) scale(0.96);
    }/* Mobile Hamburger Menu */.menu-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      width: 40px;
      height: 40px;
      position: relative;
      z-index: 101;
      border-radius: 50%;
      background: rgba(255,255,255,0.2);
      backdrop-filter: blur(5px);
    }.menu-toggle span {
      display: block;
      width: 20px;
      height: 2px;
      background-color: var(--ink);
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: all 0.3s ease;
    }.menu-toggle span:nth-child(1) { top: 35%; }.menu-toggle span:nth-child(2) { top: 50%; }.menu-toggle span:nth-child(3) { top: 65%; }.menu-toggle.is-active span:nth-child(1) {
      top: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
    }.menu-toggle.is-active span:nth-child(2) {
      opacity: 0;
    }.menu-toggle.is-active span:nth-child(3) {
      top: 50%;
      transform: translate(-50%, -50%) rotate(-45deg);
    }@media (max-width: 768px) {
.menu-toggle {
        display: block;
      }/* Move Explore button into the mobile menu if needed, or keep it up top.
         Let's keep it up top but smaller for mobile. */.nav-action {
        padding: 0 16px;
        font-size: 0.65rem;
      }
}/* HERO SECTION */.hero{
  position:relative;
  width:100%;
  min-height:85vh;

  display:flex;
  justify-content:center;
  align-items:center;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
   margin-top:0;
  overflow:hidden;

  /* DARK OVERLAY + IMAGE */
  background:
  linear-gradient(
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.25)
  ),
  url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}/* Soft glow */.hero::before{
      content:"";
      position:absolute;
      top:-200px;
      left:-200px;
      width:700px;
      height:700px;
      background:radial-gradient(circle, rgba(120,0,0,0.35), transparent 70%);
      filter:blur(60px);
      animation:floatGlow 8s ease-in-out infinite alternate;
      z-index: 1;
    }.hero::after{
      content:"";
      position:absolute;
      right:-250px;
      top:-100px;
      width:700px;
      height:700px;
      background:radial-gradient(circle, rgba(255,190,80,0.18), transparent 70%);
      filter:blur(80px);
      z-index: 1;
    }@keyframes floatGlow{
      from{
        transform:translateY(0px) translateX(0px);
      }
      to{
        transform:translateY(40px) translateX(40px);
      }
    }.hero-content{
  position:relative;
  z-index:2;
  max-width:720px;
  
  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;
  margin:0 auto;
}.hero h1{
      color:#fff;
      font-size:72px;
      line-height:1.08;
      font-weight:800;
      letter-spacing:-2px;
      margin-bottom:42px;
    }.hero p{
      color:rgba(255,255,255,0.88);
      font-size:20px;
      line-height:1.8;
      max-width:720px;
      font-weight:400;
      margin-bottom:48px;
    }/* Button */.hero-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:325px;
      height:78px;

      color:#fff;
      text-decoration:none;
      font-size:20px;
      font-weight:500;

      border:1px solid rgba(255,255,255,0.18);
      border-radius:18px;

      background:rgba(255,255,255,0.02);
      backdrop-filter:blur(8px);

      transition:all 0.35s ease;
      position:relative;
      overflow:hidden;
    }.hero-btn::before{
      content:"";
      position:absolute;
      top:0;
      left:-100%;
      width:100%;
      height:100%;
      background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.12),
        transparent
      );
      transition:0.6s;
    }.hero-btn:hover::before{
      left:100%;
    }.hero-btn:hover{
      transform:translateY(-5px);
      border-color:rgba(255,255,255,0.35);
      background:rgba(255,255,255,0.05);
      box-shadow:0 18px 40px rgba(0,0,0,0.35);
    }/* Responsive */@media(max-width:992px){
.hero{
        padding:70px 40px;
      }.hero h1{
        font-size:58px;
      }.hero p{
        font-size:18px;
      }
}@media(max-width:768px){
.hero{
        padding:60px 25px;
      }.hero h1{
        font-size:44px;
        line-height:1.15;
      }.hero p{
        font-size:17px;
        line-height:1.7;
      }.hero-btn{
        width:100%;
        max-width:280px;
        height:68px;
        font-size:22px;
      }
}/* ============================================================
           MAIN TEAM SECTION (Intro + Filters + Grid)
        ============================================================ */.team-roster-section {
            padding: 60px 5% 60px 5%; max-width: 1400px; margin: 0 auto; font-family: var(--font-team);
        }.leadership-intro { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 60px; }.pill-badge {
            display: inline-flex; align-items: center; background-color: var(--pill-bg);
            padding: 8px 16px; border-radius: 100px; margin-bottom: 20px;
        }.pill-dot {
            width: 6px; height: 6px; background-color: var(--pill-text); border-radius: 50%;
            margin-right: 8px; animation: pulseDot 2s infinite;
        }.pill-text { color: var(--pill-text); font-size: 13px; font-weight: 600; letter-spacing: 0.2px; }.leadership-title {
            font-size: 3.5rem; font-weight: 800; color: var(--ink);
            line-height: 1.1; letter-spacing: -0.03em; margin: 0; max-width: 600px;
        }.team-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-bottom: 60px; }.filter-btn {
            background: transparent; border: 1px solid #d1d5db; color: var(--ink);
            padding: 12px 32px; border-radius: 100px; font-family: var(--font-team);
            font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;
        }.filter-btn:hover { border-color: var(--ink); }.filter-btn.active {
            background: var(--category-active); border-color: var(--category-active);
            color: #111; box-shadow: 0 4px 14px rgba(255, 133, 99, 0.3);
        }.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }.team-card {
            position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 4;
            background: #111; cursor: pointer; transform: translateY(0);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
        }.team-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }.team-card-img {
            position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
            filter: grayscale(100%) contrast(1.1); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
        }.team-card:hover .team-card-img { transform: scale(1.05); filter: grayscale(0%) contrast(1.05); }.team-card-overlay {
            position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%); z-index: 2;
        }.team-card-info {
            position: absolute; bottom: 0; left: 0; width: 100%; padding: 24px; z-index: 3;
            transform: translateY(10px); transition: transform 0.4s ease;
        }.team-card:hover .team-card-info { transform: translateY(0); }.team-card-name { color: #ffffff; font-size: 1.35rem; font-weight: 700; margin: 0 0 4px 0; letter-spacing: -0.01em; }.team-card-role { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; font-weight: 400; margin: 0; }/* ============================================================
           BOTTOM CTA: GROW YOUR BUSINESS SECTION
        ============================================================ */.cta-grow-section {
            padding: 40px 5% 0px 5%; /* Adjusted bottom padding to hug the footer more tightly */
        }.cta-grow-container {
            max-width: 1000px;
            margin: 0 auto;
            background: #fafafa;
            border-radius: 28px;
            padding: 80px 70px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
        }.cta-grow-content {
            position: relative;
            z-index: 2;
            max-width: 500px;
            font-family: var(--font-team);
        }.cta-grow-title {
            font-size: 3.5rem;
            font-weight: 800;
            color: var(--ink);
            line-height: 1.1;
            letter-spacing: -0.03em;
            margin: 0 0 35px 0;
        }.cta-grow-btn {
            display: inline-flex;
            align-items: center;
            background: var(--orange-brand);
            color: #ffffff;
            text-decoration: none;
            padding: 10px 24px 10px 10px;
            border-radius: 999px;
            font-weight: 700;
            font-size: 15px;
            transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
        }.cta-grow-btn:hover {
            background: #ea643c;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 118, 77, 0.25);
        }.cta-grow-btn-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: #ffffff;
            color: var(--orange-brand);
            border-radius: 50%;
            margin-right: 14px;
        }.cta-grow-btn-icon svg { width: 14px; height: 14px; }.cta-shape-diamond {
            position: absolute; right: 18%; top: 22%; width: 180px; height: 180px;
            background: linear-gradient(135deg, #e4efff 0%, #f0e6fa 100%);
            border-radius: 28px; transform: rotate(45deg); z-index: 1;
            animation: floatShape 8s ease-in-out infinite;
        }.cta-shape-circle {
            position: absolute; right: 8%; bottom: -15%; width: 250px; height: 250px;
            background: linear-gradient(135deg, #e5f6f4 0%, #e2f4f6 100%);
            border-radius: 50%; z-index: 1;
            animation: floatShape 10s ease-in-out infinite reverse;
        }/* The 1:1 Carbon Copy overlapping card *//* ============================================================
           ANIMATIONS & REVEALS
        ============================================================ */@keyframes pulseDot {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.5); opacity: 0.7; }
            100% { transform: scale(1); opacity: 1; }
        }@keyframes floatShape {
            0% { transform: translateY(0) rotate(45deg); }
            50% { transform: translateY(-20px) rotate(45deg); }
            100% { transform: translateY(0) rotate(45deg); }
        }.reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform, opacity;
        }.reveal.active { opacity: 1; transform: translate(0, 0); }.delay-1 { transition-delay: 0.1s; }.delay-2 { transition-delay: 0.2s; }.delay-3 { transition-delay: 0.3s; }/* ============================================================
           RESPONSIVE
        ============================================================ */@media (max-width: 1024px) {
.team-grid { grid-template-columns: repeat(3, 1fr); }.team-hero-container { height: 500px; }.team-title { font-size: 4.5rem; }/* Unstacking absolute overlap gracefully for tablets */
}@media (max-width: 768px) {
.menu-toggle { display: block; }.team-hero-wrapper { padding: 90px 16px 30px 16px; }.team-hero-container { border-radius: 24px; height: 480px; }.team-title { font-size: 3.2rem; }.team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }.leadership-title { font-size: 2.5rem; }.cta-grow-container { padding: 60px 30px; text-align: left; }.cta-grow-content { margin: 0; }.cta-grow-title { font-size: 2.2rem; }.cta-shape-diamond, .cta-shape-circle { opacity: 0.15; }
}@media (max-width: 480px) {
.team-grid { grid-template-columns: 1fr; }.team-card { aspect-ratio: 4 / 5; max-width: 320px; margin: 0 auto; }
}