/* ==========================================================================
   team.css — Meet Our Team
   Same language as the rest of the site: navy hero, cyan accents, Outfit
   headings. Classes prefixed tm-.
   ========================================================================== */

.team-page { background: #f4f9ff; }

.tm-wrap { width:100%; max-width:1200px; margin-inline:auto; padding-inline:24px; }

.tm-line { width:80px; height:4px; margin:0 auto 18px; border-radius:2px;
  background:linear-gradient(90deg,#0077a8,#00dcff); }
.tm-grad { background:linear-gradient(135deg,#00dcff,#7ec8ff); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }

/* ============ HERO ============ */
.tm-hero {
  position:relative; overflow:hidden; color:#fff; text-align:center; padding:140px 0 100px;
  background: radial-gradient(circle at 20% 28%, rgba(0,184,255,0.2) 0%, transparent 45%),
              linear-gradient(160deg,#001420 0%,#002b45 55%,#03446d 100%);
}

.brand {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }

        .brand img {
            height: 45px;
            width: auto;
        }

        .brand span {
            font-weight: 700;
            font-size: 20px;
        }

.tm-badge { display:inline-flex; align-items:center; gap:8px; padding:9px 22px; border-radius:50px;
  background:rgba(0,200,255,0.14); border:1px solid rgba(255,255,255,0.25); backdrop-filter:blur(12px);
  font-size:0.8rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#d4f0ff; margin-bottom:20px; }
.tm-hero h1 { font-family:'Outfit',sans-serif; font-size:clamp(2.2rem,5vw,3.6rem); font-weight:900;
  letter-spacing:-1px; margin-bottom:16px; text-shadow:0 15px 40px rgba(0,0,0,0.45); }
.tm-hero p { max-width:60ch; margin:0 auto; font-size:1.05rem; line-height:1.8; color:rgba(255,255,255,0.86); }

.tm-wave { position:absolute; left:0; right:0; bottom:-2px; line-height:0; }
.tm-wave svg { display:block; width:100%; height:auto; }

/* ============ SWITCHER (tab bar + swapping panels) ============ */
.tm-switcher { padding: 56px 0 90px; overflow-x: clip; }

.tm-tabbar {
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-bottom:44px; padding:10px; border-radius:24px;
  background:rgba(244,249,255,0.88); backdrop-filter:blur(10px);
}
.tm-tab {
  display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:50px;
  border:1px solid #cfe3f0; background:#fff; color:#03446d; font:inherit; font-size:0.9rem;
  font-weight:700; cursor:pointer; transition:all .25s ease; white-space:nowrap;
}
.tm-tab i { font-size:0.9rem; }
.tm-tab:hover { border-color:#00b8ff; transform:translateY(-1px); }
.tm-tab[aria-selected="true"] {
  background:linear-gradient(135deg,#00b8ff,#0077a8); border-color:transparent; color:#fff;
  box-shadow:0 12px 28px rgba(0,150,220,0.35);
}
.tm-tab-n {
  min-width:20px; padding:1px 7px; border-radius:20px; font-size:0.74rem;
  background:rgba(0,119,168,0.12); color:inherit;
}
.tm-tab[aria-selected="true"] .tm-tab-n { background:rgba(255,255,255,0.28); }

/* Only the active panel is ever visible — switching teams hides the rest */
.tm-panel { display:none; }
.tm-panel.active { display:block; animation: tmPanelIn .5s cubic-bezier(.23,1,.32,1); }
@keyframes tmPanelIn {
  from { opacity:0; transform:translateY(22px) scale(.985); }
  to   { opacity:1; transform:none; }
}

.tm-panel-head { text-align:center; margin-bottom:38px; }
.tm-panel-head h2 { font-family:'Outfit',sans-serif; font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:800; color:#002b45; margin-bottom:8px; }
.tm-panel-head p { color:#0077a8; font-size:0.9rem; font-weight:600; text-transform:uppercase; letter-spacing:2px; }

/* ============ MANAGEMENT — editorial "Meet the Founder" rows ============
   Founder and Managing Director appear together, one row each, alternating
   sides for rhythm. This is deliberately a different style of card to
   everything else on the page — layered geometric shapes behind the photo,
   a large serif heading with a highlighted word, and a short teaser that
   opens the same full-bio dialog used across the rest of the site. */

.tm-founders { display:flex; flex-direction:column; gap:80px; }

.tm-founder-row {
  display:grid; grid-template-columns: 0.85fr 1.15fr; gap:clamp(32px,5vw,64px); align-items:center;
  animation: tmRowIn .6s cubic-bezier(.23,1,.32,1) both;
  animation-delay: calc(var(--i) * 140ms);
}
@keyframes tmRowIn { from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;} }

/* Second row (Managing Director) mirrors the layout: photo swaps to the right */
.tm-founder-row.rev { grid-template-columns: 1.15fr 0.85fr; }
.tm-founder-row.rev .tm-founder-visual { order:2; }
.tm-founder-row.rev .tm-founder-copy { order:1; }

/* ---- Visual: layered shapes behind a square-cornered photo ---- */
.tm-founder-visual { position:relative; width:100%; max-width:430px; justify-self:center; }
.tm-founder-visual::before { content:""; display:block; padding-top:100%; }

.tm-founder-shape {
  position:absolute; border-radius:28px; z-index:1;
  transition: transform .5s cubic-bezier(.23,1,.32,1);
}
.tm-founder-shape.s1 {
  inset:-7% 14% 14% -7%;
  background:linear-gradient(135deg, rgba(0,184,255,0.22), rgba(0,119,168,0.16));
  transform:rotate(-6deg);
}
.tm-founder-shape.s2 {
  inset:10% -6% -8% 24%;
  background:rgba(0,43,69,0.07);
  transform:rotate(4deg);
}
.tm-founder-row:hover .tm-founder-shape.s1 { transform:rotate(-9deg) translate(-6px,-4px); }
.tm-founder-row:hover .tm-founder-shape.s2 { transform:rotate(6deg) translate(4px,4px); }

.tm-founder-photo {
  position:absolute; inset:0; z-index:2; display:block; border-radius:26px; overflow:hidden;
  background:linear-gradient(135deg,#0a3d62,#0d6ba7);
  box-shadow:0 30px 60px rgba(0,40,70,0.28), 0 0 0 1px rgba(255,255,255,0.6);
}
.tm-founder-photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.tm-founder-row:hover .tm-founder-photo img { transform:scale(1.04); }
.tm-founder-photo.missing img { display:none; }
.tm-founder-photo.missing::after {
  content:"\f007"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; inset:0;
  display:grid; place-items:center; font-size:3.6rem; color:rgba(255,255,255,0.35);
}

/* ---- Copy ---- */
.tm-founder-copy { text-align:left; }
.tm-founder-heading {
  font-family:'Playfair Display', 'Outfit', serif; font-weight:800; font-style:normal;
  font-size:clamp(2.1rem, 4.4vw, 3.2rem); line-height:1.08; color:#002b45; margin-bottom:18px;
}
.tm-founder-highlight {
  position:relative; white-space:nowrap; font-style:italic; font-weight:800;
  background-image:linear-gradient(transparent 62%, rgba(0,184,255,0.3) 62%);
  background-repeat:no-repeat; padding:0 4px;
}

.tm-founder-name {
  font-size:0.86rem; font-weight:800; letter-spacing:2.2px; text-transform:uppercase;
  color:#0077a8; margin-bottom:4px;
}
.tm-founder-role { font-size:1rem; font-style:italic; color:#5a6b7c; margin-bottom:18px; }
.tm-founder-bio { color:#3a4f60; line-height:1.85; font-size:1rem; max-width:52ch; margin-bottom:24px; }

.tm-founder-actions { display:flex; align-items:center; gap:16px; }
.tm-founder-btn {
  display:inline-flex; align-items:center; gap:10px; padding:13px 26px; border-radius:50px;
  border:none; background:linear-gradient(135deg,#00b8ff,#0077a8); color:#fff; font:inherit;
  font-size:0.92rem; font-weight:700; cursor:pointer;
  box-shadow:0 14px 32px rgba(0,150,220,0.32);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.tm-founder-btn i { transition:transform .3s ease; }
.tm-founder-btn:hover { transform:translateY(-3px); box-shadow:0 20px 42px rgba(0,180,255,0.42); }
.tm-founder-btn:hover i { transform:translateX(4px); }

.tm-founder-social {
  width:44px; height:44px; flex-shrink:0; border-radius:50%; display:grid; place-items:center;
  background:#f0f8fd; border:1px solid #cfe7f5; color:#0077a8; text-decoration:none; transition:.2s;
}
.tm-founder-social:hover { background:#00b8ff; border-color:transparent; color:#fff; }

@media (max-width:900px) {
  .tm-founder-row, .tm-founder-row.rev { grid-template-columns:1fr; text-align:center; }
  .tm-founder-row.rev .tm-founder-visual, .tm-founder-row.rev .tm-founder-copy { order:initial; }
  .tm-founder-copy { text-align:center; }
  .tm-founder-bio { margin-inline:auto; }
  .tm-founder-actions { justify-content:center; }
  .tm-founders { gap:56px; }
}

@media (max-width:480px) {
  .tm-founder-visual { max-width:300px; }
  .tm-founder-actions { flex-direction:column; align-items:stretch; }
  .tm-founder-btn { justify-content:center; }
  .tm-founder-social { align-self:center; }
}

@media (hover:none) {
  .tm-founder-shape, .tm-founder-photo img { transition:none; }
}

/* ============ TEAM FILTERS (sub-groups within a panel) ============ */
.tm-filters { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:34px; }
.tm-chip {
  display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:50px;
  border:1px solid #cfe3f0; background:#fff; color:#03446d; font:inherit; font-size:0.86rem;
  font-weight:600; cursor:pointer; transition:all 0.2s ease;
}
.tm-chip:hover { border-color:#00b8ff; }
.tm-chip[aria-pressed="true"] {
  background:linear-gradient(135deg,#00b8ff,#0077a8); border-color:transparent; color:#fff;
  box-shadow:0 8px 22px rgba(0,150,220,0.3);
}
.tm-chip .n { min-width:20px; padding:1px 6px; border-radius:20px; background:rgba(0,119,168,0.12); font-size:0.74rem; }
.tm-chip[aria-pressed="true"] .n { background:rgba(255,255,255,0.25); }

/* ============ TEAM GRID (standard member cards) ============ */
.tm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:24px; }

.tm-card {
  display:flex; flex-direction:column;
  background:#fff; border-radius:22px; overflow:hidden; border:1px solid rgba(0,150,210,0.14);
  box-shadow:0 12px 30px rgba(0,60,100,0.07); cursor:pointer; text-align:left; font:inherit;
  color:inherit; width:100%; padding:0;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease;
  animation: tmCardIn .5s cubic-bezier(.23,1,.32,1) both;
  animation-delay: calc(var(--i) * 55ms);
}
@keyframes tmCardIn { from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;} }

.tm-card:hover { transform:translateY(-8px); border-color:#00b4e6; box-shadow:0 26px 50px rgba(0,110,160,0.16); }

.tm-card .tm-shot { display:block; position:relative; width:100%; aspect-ratio:1; overflow:hidden; background:linear-gradient(135deg,#0a3d62,#0d6ba7); flex-shrink:0; }
.tm-card .tm-shot img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(85%) contrast(1.02); transition: filter .45s ease, transform .5s ease;
}
.tm-card:hover .tm-shot img { filter:grayscale(0%); transform:scale(1.07); }
.tm-card .tm-shot.missing img { display:none; }
.tm-card .tm-shot.missing::after {
  content:"\f007"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; inset:0;
  display:grid; place-items:center; font-size:2.2rem; color:rgba(255,255,255,0.3);
}
.tm-card .tm-shot .tm-linkedin {
  position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.95); color:#0077a8; display:grid; place-items:center;
  opacity:0; transform:translateY(8px); transition:all .25s ease; text-decoration:none; font-size:0.95rem;
}
.tm-card:hover .tm-linkedin { opacity:1; transform:none; }

.tm-card-body { display:block; padding:16px 18px 20px; }
.tm-card h4 { font-family:'Outfit',sans-serif; font-size:1.02rem; color:#002b45; margin-bottom:3px; line-height:1.3; }
.tm-card .tm-role { font-size:0.82rem; color:#0077a8; font-weight:600; }

.tm-empty { grid-column:1/-1; padding:50px; text-align:center; color:#5a6b7c; background:#fff;
  border-radius:20px; border:2px dashed #cfe3f0; }
.tm-empty i { font-size:2rem; color:#9cc8e2; margin-bottom:12px; display:block; }

/* ============ MEMBER PROFILE DIALOG ============ */
.tm-dialog {
  width:min(680px, calc(100% - 32px)); max-height:calc(100dvh - 40px); margin:auto; padding:0;
  border:none; border-radius:26px; background:#fff; color:#1a2b3c;
  box-shadow:0 40px 100px rgba(0,20,40,0.45); overflow:hidden;
}
.tm-dialog::backdrop { background:rgba(0,20,32,0.65); backdrop-filter:blur(4px); }
.tm-dialog[open] { display:flex; flex-direction:column; animation: tmRise .35s cubic-bezier(.23,1,.32,1); }
@keyframes tmRise { from{opacity:0; transform:translateY(24px) scale(.98);} to{opacity:1; transform:none;} }

.tm-d-top { display:flex; gap:22px; padding:30px 30px 20px; align-items:center; }
.tm-d-shot { width:112px; height:112px; flex:0 0 112px; border-radius:20px; overflow:hidden;
  background:linear-gradient(135deg,#0a3d62,#0d6ba7); position:relative; }
.tm-d-shot img { width:100%; height:100%; object-fit:cover; display:block; }
.tm-d-shot.missing img { display:none; }
.tm-d-shot.missing::after { content:"\f007"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; inset:0; display:grid; place-items:center; font-size:1.8rem; color:#fff; opacity:.6; }
.tm-d-name h3 { font-family:'Outfit',sans-serif; font-size:1.35rem; color:#002b45; margin-bottom:4px; }
.tm-d-name .tm-role { font-size:0.9rem; color:#0077a8; font-weight:700; }
.tm-d-name .tm-dept { font-size:0.8rem; color:#5a6b7c; margin-top:3px; }

.tm-close { position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%;
  border:none; background:#f0f8fd; color:#03446d; font-size:1.3rem; line-height:1; cursor:pointer;
  transition:all .2s ease; }
.tm-close:hover { background:#e2f1fb; transform:rotate(90deg); }

.tm-d-body { padding:4px 30px 30px; overflow-y:auto; }
.tm-d-body p { color:#3a4f60; line-height:1.8; margin-bottom:14px; }
.tm-d-socials { display:flex; gap:10px; margin-top:6px; }
.tm-d-socials a { width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:#f0f8fd; border:1px solid #cfe7f5; color:#0077a8; transition:.2s; }
.tm-d-socials a:hover { background:#00b8ff; border-color:transparent; color:#fff; }

/* ============ JOIN CTA ============ */
.tm-cta { position:relative; overflow:hidden; padding:84px 0; text-align:center; color:#fff;
  background: radial-gradient(circle at 15% 20%, rgba(0,220,255,0.25), transparent 40%),
              linear-gradient(135deg,#002b45,#03446d); }
.tm-cta h2 { font-family:'Outfit',sans-serif; font-size:clamp(1.8rem,4.2vw,2.8rem); font-weight:800; margin-bottom:14px; }
.tm-cta p { max-width:58ch; margin:0 auto 28px; color:rgba(255,255,255,0.82); line-height:1.8; }
.tm-btn { display:inline-flex; align-items:center; gap:10px; padding:15px 32px; border-radius:50px;
  background:linear-gradient(135deg,#00b8ff,#0077a8); color:#fff; font-weight:700; text-decoration:none;
  box-shadow:0 15px 40px rgba(0,150,220,0.35); transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.tm-btn:hover { transform:translateY(-4px); box-shadow:0 24px 50px rgba(0,180,255,0.5); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .tm-grid { grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:16px; }
}
@media (max-width: 760px) {
  .tm-switcher { padding:44px 0 64px; }
  .tm-hero { padding:118px 0 76px; }
  .tm-tabbar {
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; gap:8px;
    margin-inline:-24px; padding:10px 24px; border-radius:0; background:transparent;
    backdrop-filter:none; scroll-snap-type:x proximity; scrollbar-width:none;
  }
  .tm-tabbar::-webkit-scrollbar { display:none; }
  .tm-tab { flex:0 0 auto; scroll-snap-align:start; padding:10px 16px; font-size:0.84rem; }
  .tm-filters { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; margin-inline:-24px;
    padding:4px 24px 14px; scroll-snap-type:x proximity; scrollbar-width:none; }
  .tm-filters::-webkit-scrollbar { display:none; }
  .tm-chip { flex:0 0 auto; scroll-snap-align:start; }
  .tm-d-top { flex-direction:column; text-align:center; padding:50px 22px 16px; }
  .tm-d-body { padding:4px 22px 26px; text-align:center; }
  .tm-d-socials { justify-content:center; }
}
@media (max-width: 480px) {
  .tm-grid { grid-template-columns:1fr 1fr; }
}
@media (hover:none) {
  .tm-card:hover, .tm-duo-card:hover { transform:none; }
  .tm-card:hover .tm-shot img { transform:none; filter:grayscale(40%); }
  .tm-card .tm-linkedin { opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-panel.active, .tm-duo-card, .tm-card { animation:none; }
}