/* ============================================================
       BRAND TOKENS — sourced from geoaerialconsulting.com CSS
       Primary:   #009a4e  (navbar, CTAs, links)
       Accent:    #fbc50b  (highlights, borders, badges)
       Dark:      #212529  (text, cards, footer)
       Dark-mid:  #2e3338  (secondary dark surfaces)
       ============================================================ */
    :root {
      --green:       #0d2340;
      --green-dark:  #1a4a8a;
      --green-light: #e8edf5;
      --yellow:      #fbc50b;
      --yellow-bg:   #fffbec;
      --dark:        #212529;
      --dark-mid:    #2e3338;
      --white:       #ffffff;
      --off-white:   #f8f9fa;
      --surface:     #ffffff;
      --border:      #e2e8ef;
      --border-mid:  #cdd5de;
      --text:        #212529;
      --text-mid:    #495057;
      --text-muted:  #6c757d;

      --font:     'Poppins', system-ui, sans-serif;
      --radius:   12px;
      --radius-sm: 8px;
      --shadow:   0 2px 14px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
      --shadow-h: 0 10px 36px rgba(0,0,0,.12), 0 3px 10px rgba(0,0,0,.05);
      --trans:    0.2s cubic-bezier(.4,0,.2,1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font);
      background: var(--off-white);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      line-height: 1.6;
    }
    img  { display: block; max-width: 100%; }
    button { font-family: var(--font); }
    a { color: inherit; text-decoration: none; }
    .page-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

    /* ============================================================
       HERO — dark base matching site's dark section style
       ============================================================ */
    .team-hero {
      position: relative;
      background: var(--dark);
      padding: 90px 24px 76px;
      text-align: center;
      overflow: hidden;
    }
    /* Subtle dot pattern matching Seodo theme's pattern-bg aesthetic */
    .team-hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 24px 24px;
      pointer-events: none;
    }
    /* Green glow matching brand primary */
    .team-hero::after {
      content: '';
      position: absolute;
      bottom: -30%; left: -10%; width: 55%; height: 120%;
      background: radial-gradient(ellipse, rgba(0,154,78,.18) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero-glow-r {
      position: absolute;
      top: -30%; right: -10%; width: 50%; height: 120%;
      background: radial-gradient(ellipse, rgba(251,197,11,.08) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero-inner {
      position: relative; z-index: 2;
      max-width: 680px; margin: 0 auto;
    }
    /* Eyebrow matching Seodo section-title h6 style — yellow underline */
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: .72rem; font-weight: 600;
      letter-spacing: .16em; text-transform: uppercase;
      color: var(--yellow); margin-bottom: 16px;
    }
    .hero-eyebrow span { width: 22px; height: 2px; background: var(--yellow); }

    .team-hero h1 {
      font-size: clamp(2rem, 4.5vw, 3.2rem);
      font-weight: 800; letter-spacing: -.02em;
      color: var(--white); line-height: 1.1; margin-bottom: 18px;
    }
    /* Yellow underline accent on heading — matches .section-title h6 border */
    .team-hero h1 span {
      position: relative; display: inline-block;
    }
    .team-hero h1 span::after {
      content: '';
      position: absolute; left: 0; bottom: -4px;
      width: 100%; height: 3px;
      background: var(--yellow);
    }
    .team-hero p {
      font-size: .96rem; font-weight: 300;
      color: rgba(255,255,255,.68); line-height: 1.75;
      max-width: 540px; margin: 0 auto;
    }
    .hero-note {
      font-size: .82rem !important; font-style: italic;
      color: rgba(255,255,255,.38) !important; margin-top: 10px !important;
    }

    /* Stats bar */
    .hero-stats {
      display: flex; justify-content: center;
      margin-top: 50px; padding-top: 32px;
      border-top: 1px solid rgba(255,255,255,.1);
    }
    .stat {
      flex: 1; max-width: 150px; text-align: center;
      padding: 0 16px;
      border-right: 1px solid rgba(255,255,255,.08);
    }
    .stat:last-child { border-right: none; }
    .stat-number {
      font-size: 1.9rem; font-weight: 800;
      color: var(--yellow); line-height: 1;
    }
    .stat-label {
      font-size: .68rem; font-weight: 500;
      color: rgba(255,255,255,.45);
      margin-top: 5px; letter-spacing: .07em; text-transform: uppercase;
    }

    /* ============================================================
       TEAM SECTION
       ============================================================ */
    .team-section { padding: 68px 0 96px; }

    .section-label {
      display: flex; align-items: center; gap: 12px;
      font-size: .68rem; font-weight: 700;
      letter-spacing: .18em; text-transform: uppercase;
      color: var(--green); margin-bottom: 28px;
    }
    .section-label::after {
      content: ''; flex: 1; height: 1px; background: var(--border);
    }

    /* ============================================================
       MEMBER CARDS
       ============================================================ */
    .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 22px;
    }

    .member-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 26px 22px 22px;
      display: flex; flex-direction: column; gap: 15px;
      transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
      position: relative; overflow: hidden;
    }
    .member-card::before {
      content: ''; position: absolute;
      top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--green), var(--yellow));
      opacity: 0; transition: opacity var(--trans);
    }
    .member-card:hover::before  { opacity: 1; }
    .member-card:hover {
      box-shadow: var(--shadow-h);
      transform: translateY(-4px);
      border-color: var(--border-mid);
    }

    /* Founder card — subtle green-tinted surface */
    .member-card.founder {
      border-color: rgba(0,154,78,.2);
      background: linear-gradient(160deg, #ffffff 0%, #f0faf5 100%);
    }
    .founder-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: .65rem; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--green); background: var(--green-light);
      border: 1px solid rgba(0,154,78,.22);
      border-radius: 999px; padding: 3px 10px; margin-bottom: 2px;
    }
    .founder-badge::before {
      content: ''; width: 5px; height: 5px;
      border-radius: 50%; background: var(--green);
    }

    /* Card header row */
    .card-header { display: flex; align-items: flex-start; gap: 14px; }
    .card-photo {
      flex-shrink: 0; width: 68px; height: 68px;
      border-radius: 50%; overflow: hidden;
      border: 2px solid var(--border); background: var(--off-white);
      transition: border-color var(--trans);
    }
    .member-card:hover .card-photo { border-color: var(--green); }
    .card-photo img { width: 100%; height: 100%; object-fit: cover; }

    .card-identity { flex: 1; min-width: 0; }
    .card-name {
      font-size: 1.02rem; font-weight: 700;
      color: var(--dark); line-height: 1.2; margin-bottom: 3px;
    }
    .card-role {
      font-size: .76rem; font-weight: 500;
      color: var(--green); line-height: 1.35;
    }

    .card-bio {
      font-size: .84rem; font-weight: 300;
      color: var(--text-muted); line-height: 1.65;
      display: -webkit-box; -webkit-line-clamp: 3;
      -webkit-box-orient: vertical; overflow: hidden;
    }

    /* Expertise chips — yellow accent */
    .card-chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .chip {
      font-size: .68rem; font-weight: 500;
      padding: 3px 9px; border-radius: 999px;
      background: rgba(0,154,78,.06);
      color: var(--green-dark);
      border: 1px solid rgba(0,154,78,.18);
      white-space: nowrap;
    }

    /* Card footer */
    .card-footer {
      display: flex; align-items: center;
      justify-content: space-between;
      margin-top: auto; padding-top: 14px;
      border-top: 1px solid var(--border);
    }
    .card-detail-btn {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: .78rem; font-weight: 600;
      color: var(--green); background: none; border: none;
      cursor: pointer; padding: 0;
      transition: color var(--trans), gap var(--trans);
    }
    .card-detail-btn:hover { color: var(--green-dark); gap: 9px; }
    .card-detail-btn svg { transition: transform var(--trans); }
    .card-detail-btn:hover svg { transform: translateX(2px); }

    .card-socials { display: flex; gap: 7px; }
    .social-icon {
      width: 28px; height: 28px; border-radius: var(--radius-sm);
      background: var(--off-white); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted); transition: all var(--trans);
    }
    .social-icon:hover { background: var(--green); border-color: var(--green); color: white; }
    .social-icon svg { width: 13px; height: 13px; }

    /* ============================================================
       DETAIL MODAL
       ============================================================ */
    .modal-backdrop {
      position: fixed; inset: 0;
      background: rgba(33,37,41,.65);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      z-index: 9000; opacity: 0; visibility: hidden;
      transition: opacity .24s ease, visibility .24s ease;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
    }
    .modal-backdrop.open { opacity: 1; visibility: visible; }

    .modal-box {
      background: white; border-radius: 16px;
      width: 100%; max-width: 820px; max-height: 92vh;
      overflow-y: auto; position: relative;
      box-shadow: 0 24px 80px rgba(0,0,0,.22);
      transform: translateY(18px) scale(.97);
      transition: transform .26s cubic-bezier(.4,0,.2,1);
      scrollbar-width: thin; scrollbar-color: var(--border) transparent;
    }
    .modal-backdrop.open .modal-box { transform: none; }

    .modal-close {
      position: absolute; top: 14px; right: 14px; z-index: 10;
      width: 34px; height: 34px; border-radius: 50%;
      background: var(--off-white); border: 1px solid var(--border);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      color: var(--text-muted); transition: all var(--trans);
    }
    .modal-close:hover { background: var(--dark); color: white; border-color: var(--dark); }
    .modal-close svg { width: 15px; height: 15px; }

    /* Modal header band — dark matching site's dark sections */
    .modal-band {
      background: var(--dark); padding: 32px 36px 28px;
      display: flex; gap: 22px; align-items: flex-start;
      border-radius: 16px 16px 0 0;
    }
    .modal-photo {
      flex-shrink: 0; width: 88px; height: 88px;
      border-radius: 50%; overflow: hidden;
      border: 3px solid rgba(251,197,11,.35);
    }
    .modal-photo img { width: 100%; height: 100%; object-fit: cover; }

    .modal-id { flex: 1; }
    .modal-name {
      font-size: 1.4rem; font-weight: 800;
      color: white; line-height: 1.15; margin-bottom: 4px;
    }
    /* Yellow bottom-border on role — matching site's section-title underline */
    .modal-role {
      font-size: .86rem; font-weight: 400;
      color: var(--yellow);
      padding-bottom: 10px;
      border-bottom: 2px solid rgba(251,197,11,.3);
      margin-bottom: 10px;
    }
    .modal-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
    .modal-chip {
      font-size: .68rem; font-weight: 500; padding: 3px 9px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.78);
      border: 1px solid rgba(255,255,255,.14);
    }

    /* Modal body — 2-col grid */
    .modal-body {
      padding: 32px 36px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px;
    }
    .modal-bio-full {
      grid-column: 1 / -1;
      font-size: .9rem; font-weight: 300;
      color: var(--text-mid); line-height: 1.8;
    }

    /* Section headings — yellow border matching site's .section-title h6 */
    .modal-section h4 {
      font-size: .68rem; font-weight: 700;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--green); margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--yellow);
    }
    .modal-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
    .modal-list li {
      font-size: .84rem; font-weight: 300;
      color: var(--text-mid); padding-left: 14px;
      position: relative; line-height: 1.55;
    }
    .modal-list li::before {
      content: ''; position: absolute;
      left: 0; top: .55em;
      width: 5px; height: 5px;
      border-radius: 50%; background: var(--green);
    }

    .modal-expertise-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .modal-expertise-tags .chip { font-size: .74rem; padding: 5px 11px; }

    /* Full-width section for Publications */
    .modal-section.full { grid-column: 1 / -1; }

    /* Publication cards */
    .pub-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .pub-item {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 14px 16px;
      background: var(--off-white); border: 1px solid var(--border);
      border-left: 3px solid var(--green);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }
    .pub-icon {
      flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-sm);
      background: var(--green-light); border: 1px solid rgba(0,154,78,.2);
      display: flex; align-items: center; justify-content: center;
      color: var(--green);
    }
    .pub-icon svg { width: 16px; height: 16px; }
    .pub-text { flex: 1; }
    .pub-title {
      font-size: .86rem; font-weight: 600;
      color: var(--dark); line-height: 1.4; margin-bottom: 3px;
    }
    .pub-meta { font-size: .74rem; font-weight: 300; color: var(--text-muted); line-height: 1.4; }
    .pub-link {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: .73rem; font-weight: 600;
      color: var(--green); margin-top: 5px;
      transition: color var(--trans);
    }
    .pub-link:hover { color: var(--green-dark); }
    .pub-link svg { width: 11px; height: 11px; }

    /* Contact CTA row */
    .modal-contact-row {
      grid-column: 1 / -1;
      background: var(--green-light);
      border: 1px solid rgba(0,154,78,.2);
      border-radius: var(--radius-sm);
      padding: 18px 22px;
      display: flex; align-items: center;
      justify-content: space-between; gap: 14px; flex-wrap: wrap;
    }
    .modal-contact-text { font-size: .87rem; color: var(--text-mid); }
    .modal-contact-text strong { color: var(--dark); font-weight: 700; display: block; }
    .modal-contact-btn {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--green); color: white;
      border: none; border-radius: 999px;
      padding: 9px 20px; font-size: .82rem; font-weight: 600;
      cursor: pointer; transition: background var(--trans), transform var(--trans);
    }
    .modal-contact-btn:hover { background: var(--green-dark); transform: translateY(-1px); }
    .modal-contact-btn svg { width: 15px; height: 15px; }

    /* ============================================================
       CONTACT FORM MODAL
       ============================================================ */
    .contact-backdrop {
      position: fixed; inset: 0;
      background: rgba(33,37,41,.7);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      z-index: 9100; opacity: 0; visibility: hidden;
      transition: opacity .24s ease, visibility .24s ease;
      display: flex; align-items: center; justify-content: center; padding: 20px;
    }
    .contact-backdrop.open { opacity: 1; visibility: visible; }

    .contact-box {
      background: white; border-radius: 16px;
      width: 100%; max-width: 700px; max-height: 92vh; overflow-y: auto;
      box-shadow: 0 24px 80px rgba(0,0,0,.22);
      display: grid; grid-template-columns: 1fr 1.35fr;
      transform: translateY(18px) scale(.97);
      transition: transform .26s cubic-bezier(.4,0,.2,1);
    }
    .contact-backdrop.open .contact-box { transform: none; }

    .contact-left {
      background: var(--dark); padding: 36px 26px;
      border-radius: 16px 0 0 16px;
      display: flex; flex-direction: column; gap: 24px; position: relative;
    }
    .cform-close {
      position: absolute; top: 14px; right: 14px;
      width: 30px; height: 30px; border-radius: 50%;
      background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      color: white; transition: background var(--trans);
    }
    .cform-close:hover { background: rgba(255,255,255,.18); }
    .cform-close svg { width: 13px; height: 13px; }
    .contact-left h3 {
      font-size: 1.2rem; font-weight: 700; color: white; line-height: 1.2;
      border-bottom: 2px solid var(--yellow); padding-bottom: 10px;
    }
    .contact-left p { font-size: .82rem; font-weight: 300; color: rgba(255,255,255,.6); line-height: 1.65; }

    .cinfo-items { display: flex; flex-direction: column; gap: 14px; }
    .cinfo-item  { display: flex; align-items: flex-start; gap: 11px; }
    .cinfo-icon {
      width: 32px; height: 32px; border-radius: var(--radius-sm);
      background: rgba(0,154,78,.2); border: 1px solid rgba(0,154,78,.3);
      display: flex; align-items: center; justify-content: center;
      color: #4dde9a; flex-shrink: 0;
    }
    .cinfo-icon svg { width: 14px; height: 14px; }
    .cinfo-text { font-size: .79rem; color: rgba(255,255,255,.66); line-height: 1.5; }
    .cinfo-text a { color: rgba(255,255,255,.66); text-decoration: underline; }
    .cinfo-text strong {
      color: white; display: block; font-size: .66rem;
      letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px;
    }

    .contact-right { padding: 36px 26px; }
    .contact-right h4 { font-size: .92rem; font-weight: 700; color: var(--dark); margin-bottom: 18px; }

    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .form-group { display: flex; flex-direction: column; gap: 4px; }
    .form-group.full { grid-column: 1 / -1; }
    .form-label {
      font-size: .67rem; font-weight: 700;
      color: var(--text-muted); letter-spacing: .07em; text-transform: uppercase;
    }
    .form-input, .form-textarea {
      font-family: var(--font); font-size: .84rem;
      color: var(--text); background: var(--off-white);
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      padding: 9px 12px; outline: none;
      transition: border-color var(--trans), box-shadow var(--trans);
    }
    .form-input:focus, .form-textarea:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(0,154,78,.12);
    }
    .form-textarea { min-height: 90px; resize: vertical; }
    .form-submit {
      grid-column: 1 / -1;
      background: var(--green); color: white; border: none;
      border-radius: 999px; padding: 11px 24px;
      font-family: var(--font); font-size: .83rem; font-weight: 700;
      letter-spacing: .05em; text-transform: uppercase;
      cursor: pointer; margin-top: 4px;
      transition: background var(--trans), transform var(--trans);
    }
    .form-submit:hover { background: var(--green-dark); transform: translateY(-1px); }

    /* Toast */
    .toast {
      position: fixed; bottom: 24px; right: 24px;
      background: var(--dark); color: white;
      padding: 12px 20px; border-radius: 10px;
      font-size: .84rem; font-weight: 500;
      border-left: 3px solid var(--yellow);
      box-shadow: 0 8px 28px rgba(0,0,0,.18);
      transform: translateY(70px); opacity: 0;
      transition: all .3s cubic-bezier(.4,0,.2,1); z-index: 9999;
      display: flex; align-items: center; gap: 9px;
    }
    .toast.show { transform: none; opacity: 1; }
    .toast::before {
      content: ''; width: 7px; height: 7px;
      border-radius: 50%; background: var(--yellow); flex-shrink: 0;
    }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 860px) {
      .modal-body { grid-template-columns: 1fr; }
      .modal-bio-full, .modal-section.full, .modal-contact-row { grid-column: 1; }
      .modal-band { padding: 24px 22px; }
      .modal-body { padding: 24px 22px; }
    }
    @media (max-width: 640px) {
      .stat { padding: 0 10px; }
      .contact-box { grid-template-columns: 1fr; }
      .contact-left { border-radius: 16px 16px 0 0; }
      .form-grid { grid-template-columns: 1fr; }
      .form-group.full, .form-submit { grid-column: 1; }
      .modal-band { flex-direction: column; gap: 14px; }
      .modal-photo { width: 72px; height: 72px; }
    }
    @media (max-width: 400px) {
      .team-grid { grid-template-columns: 1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
    }
    @keyframes cardIn {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: none; }
    }