/* ================================
   TVT — Neo Slate (Dark + Glass)
   Completely new look & rhythm
=================================*/
:root{
  --bg:#0b0f16;          /* deep slate */
  --bg-soft:#0f1522;     /* panels */
  --glass:rgba(255,255,255,.06);
  --line:#1b2a40;
  --ink:#e9f1fd;         /* text */
  --muted:#9bb0c9;       /* secondary text */
  --g1:#ff6a45;          /* coral */
  --g2:#ffb85e;          /* mango */
  --g3:#35d0bf;          /* teal */
  --vio:#7d73ff;         /* violet */
  --radius:18px;
  --wrap:clamp(280px, 90vw, 1160px);
}
/* ================= REAL FIX – MAKE ALL TEAM PHOTOS SQUARE ================= */
/* ===== FINAL FIX: CLEAN SQUARE TEAM PHOTOS ===== */
/* ===== ULTRA CLEAN TEAM GRID – FULL SQUARE PHOTO ===== */

.team-grid .person .avatar-wrap {
  position: relative !important;
  width: 200px !important;          /* make all squares same size */
  aspect-ratio: 1 / 1 !important;   /* perfect square */
  margin: 10px auto 14px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #0f1522 !important;    /* fallback dark bg */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35) !important;
}
.visit-btn{
  display:inline-block;
  margin-top:14px;
  padding:10px 16px;
  font-weight:700;
  border-radius:12px;
  background:linear-gradient(90deg,#FFB652,#FF6A4A);
  color:#0b0f16;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.32);
  transition:transform .18s ease, box-shadow .18s ease;
}


.visit-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,.45);
}

/* Remove orange blob completely */
.team-grid .person .avatar-wrap .blob-bg {
  display: none !important;
}

/* Make entire square filled with photo */
.team-grid .person .avatar-wrap .avatar {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;         /* full-bleed photo */
  object-position: center !important;   /* nice crop: center */
  border-radius: 18px !important;
}

/* Fix zoom modal also */
.zoom-img {
  object-fit: contain !important;
}

.team-grid .person .avatar-wrap {
  position: relative !important;
  width: 190px !important;          /* square size */
  aspect-ratio: 1 / 1 !important;   /* always 1:1 */
  margin: 10px auto 12px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* optional soft orange glow behind normal photos */
  background: radial-gradient(circle at 30% 10%, #ffb652, #ff6a4a) !important;
}

/* hide old round blob so it doesn’t fight with the square frame */
.team-grid .person .avatar-wrap .blob-bg {
  display: none !important;
}

/* make photo fill the square nicely */
.team-grid .person .avatar-wrap .avatar {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;        /* fills box, no distortion */
  object-position: center top !important; /* focus on face/upper body */
  border-radius: 22px !important;
}

.team-grid .person .avatar-wrap {
  width: 240px !important;         /* Square size */
  height: 240px !important;
  aspect-ratio: 1/1 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  margin: 0 auto 14px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(4px) !important;
}

/* Make orange circle fit square */
.team-grid .person .avatar-wrap .blob-bg {
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  opacity: .88 !important;
}

/* Make actual photo fit beautifully */
.team-grid .person .avatar-wrap .avatar {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;        /* <– PERFECT FIX */
  object-position: top center !important;
  border-radius: 20px !important;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:
    radial-gradient(1200px 700px at 85% -10%, rgba(125,115,255,.12), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(53,208,191,.10), transparent 60%),
    var(--bg);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial;
  letter-spacing:.1px;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.wrap{width:var(--wrap); margin-inline:auto}
.center{text-align:center}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--glass), rgba(255,255,255,.02));
  color:var(--ink); cursor:pointer; transition:transform .2s, box-shadow .2s;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.35)}
.btn-primary{border:0; color:#0e0f14; font-weight:700;
  background:linear-gradient(90deg, var(--g1), var(--g2));
}

/* Headings */
.hd{font-size:clamp(28px,3.6vw,44px); margin:0 0 8px; font-weight:800}
.sub{color:var(--muted)}
.grad{background:linear-gradient(90deg, var(--g1), var(--g2)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Curtain for page transition */
.curtain{position:fixed; inset:0; z-index:999;
  background:linear-gradient(180deg, var(--g1), var(--g2));
  transform:translateY(100%);
}

/* ================= NAV ================= */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background:rgba(9,12,20,.55);
  border-bottom:1px solid var(--line);
}
.nav .nav-wrap{
  width:var(--wrap); margin:auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.badge{width:26px; height:26px; border-radius:8px;
  background:conic-gradient(from 120deg, var(--g1), var(--g2), var(--g3), var(--vio));
  box-shadow:0 0 0 2px rgba(255,255,255,.07) inset;
}
.links a{
  margin:0 12px; padding:6px 0; opacity:.85; border-bottom:2px solid transparent; font-weight:600;
}
.links a:hover,.links a.active{opacity:1; border-color:var(--g2)}

/* ================ HERO ================= */
.hero{
  display:grid; grid-template-columns:1.08fr 1fr; gap:36px; align-items:center;
  padding:10vh 0;
}
.tag{color:var(--muted); font-weight:700; letter-spacing:.2px}
.title{font-size:clamp(34px,5.2vw,68px); line-height:1.04; margin:.3rem 0 .7rem; font-weight:900}
.hero .cta{display:flex; gap:12px; margin-top:12px}

.hero-right{position:relative; display:flex; justify-content:center; align-items:center}
.hero-img{
  width:min(350px,92%); position:relative; z-index:2;
  transform-style:preserve-3d;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,.45));
  transition: transform .25s ease;
}
.blob{
  position:absolute; z-index:1;
  width:min(560px,46vw); height:min(460px,40vw);
  border-radius:58% 42% 65% 35% / 60% 50% 50% 40%;
  background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.18), transparent 45%),
              linear-gradient(135deg, var(--g2), var(--g1));
  filter: blur(8px); opacity:.95;
}

/* ============== MARQUEE ================= */
.marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.02); overflow:hidden}
.marquee .track{display:flex; align-items:center; gap:48px; padding:18px 0; will-change:transform}
.marquee img{height:64px; width:auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.3)); opacity:.92}

/* =============== INTRO ================== */
.intro{padding:9vh 0}
.max60{max-width:62ch; margin-inline:auto}

/* ============== JOURNEY ================= */
.two-col{display:grid; grid-template-columns:1.08fr 1fr; gap:28px; align-items:center; padding:9vh 0}
.frame{
  border-radius:20px; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(180deg, var(--glass), rgba(255,255,255,.02));
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.stats{display:flex; gap:14px; flex-wrap:wrap; margin-top:14px}
.stat{
  background:linear-gradient(180deg, var(--glass), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:16px; padding:14px 16px; min-width:180px; text-align:center;
}
.stat .num{font-size:42px; font-weight:900; background:linear-gradient(90deg, var(--g1), var(--g2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat span:last-child{display:block; color:var(--muted)}
.num {
  display: inline-block;
  white-space: nowrap;
}

.num[data-plus="1"]::after{
  content:"+";
  margin-left: 6px;
  display:inline-block;
  font-size:.85em;
  transform: translateY(-.06em);

  /* ✅ make + visible even when text is transparent */
  background: linear-gradient(90deg, var(--g1), var(--g2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}



/* ============ DIFFERENTIATORS =========== */
.diff{padding:8vh 0}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  padding:18px; border-radius:18px;
  background:linear-gradient(180deg, var(--glass), rgba(255,255,255,.02));
  border:1px solid var(--line);
  transform-style:preserve-3d;
}
.card h4{margin:0 0 6px}

/* ================= THEMES =============== */
.themes{padding:9vh 0}
.checks{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px}
.checks li{
  padding:14px 16px; font-weight:700; border-radius:12px;
  background:#0c1322; border:1px solid var(--line);
}
.collage{display:grid; gap:12px}
.tile{border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:0 8px 32px rgba(0,0,0,.45)}

/* ============ TESTIMONIALS ============= */
.testimonials{padding:8vh 0; background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)}
.ticker{overflow:hidden}
.ticker-track{display:flex; gap:22px; padding:10px 0; white-space:nowrap}
.ticker blockquote{
  margin:0; max-width:520px; color:var(--ink);
  background:linear-gradient(180deg, var(--glass), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:14px; padding:14px 16px;
}

/* ================== CTA ================= */
.cta-strip{padding:8vh 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}
.cta-strip .muted{color:#b7c6dc}

/* ================= FOOTER ============== */
.footer{border-top:1px solid var(--line); background:#0a0f17; color:#c7d6ee; padding:28px 0 0}
.footer-grid{width:var(--wrap); margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.footer-grid a{color:#e9f2ff}
.copy{border-top:1px solid rgba(255,255,255,.12); margin-top:16px; padding:12px 0; text-align:center; color:#a9bad3}

/* ============== RESPONSIVE ============= */
@media (max-width:980px){
  .hero, .two-col{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}
/* ===== Team page specific ===== */
.team-hero{position:relative; padding:11vh 0 6vh}
.team-hero .grad-line{width:64px; height:6px; border-radius:6px; background:linear-gradient(90deg,var(--g1),var(--g2)); margin:6px 0 12px}
.hero-title{display:flex; gap:.5ch; align-items:baseline}
.hero-title .amp{font-weight:900; font-size:clamp(28px,4vw,42px); color:var(--muted)}
.hero-title .mask{display:inline-block; overflow:hidden}

.hero-blobs .blob{position:absolute; filter:blur(10px); opacity:.9}
.hero-blobs .b1{right:8%; top:-12px; width:360px; height:260px; border-radius:60% 40% 55% 45%/55% 45% 55% 45%; background:linear-gradient(135deg,var(--g2),var(--g1))}
.hero-blobs .b2{left:-6%; top:40px; width:280px; height:220px; border-radius:45% 55% 40% 60%/55% 45% 55% 45%; background:linear-gradient(135deg,var(--vio),var(--g3))}

.roles{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.03); overflow:hidden}
.roles-track{display:flex; gap:32px; padding:14px 0; white-space:nowrap; will-change:transform}
.roles-track span{padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.02)); font-weight:700}

.team-grid-section{padding:8vh 0 6vh}
.grid-note{margin-bottom:10px}
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.person{padding:16px; border-radius:18px; border:1px solid var(--line); background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.02)); text-align:center; cursor:pointer; transform-style:preserve-3d; box-shadow:0 16px 40px rgba(0,0,0,.22)}
.person h4{margin:10px 0 4px}
.person .role{margin:0; color:var(--muted); font-size:14px}
.avatar-wrap{position:relative; width:min(220px,70%); aspect-ratio:1/1.1; margin:10px auto 6px; perspective:800px}
.avatar{width:100%; height:100%; object-fit:contain; position:relative; z-index:1}
.blob-bg{position:absolute; inset:8% 0 0 0; width:100%; height:100%; border-radius:60% 40% 55% 45%/50% 55% 45% 50%; background:linear-gradient(135deg,var(--g2),var(--g1)); filter:blur(4px); opacity:.85}
.cardish{margin:24px auto; padding:22px; border:1px solid var(--line); background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.02)); border-radius:18px}
.quote{font-size:48px; line-height:.4; color:var(--muted); margin-bottom:6px}
.max60{max-width:62ch; margin-inline:auto}

.zoom-modal{position:fixed; inset:0; display:grid; place-items:center; z-index:100}
.zoom-backdrop{position:absolute; inset:0; background:rgba(4,8,16,.72); backdrop-filter:blur(6px)}
.zoom-card{position:relative; width:min(860px,92vw); border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#0e1524; box-shadow:0 28px 80px rgba(0,0,0,.55)}
.zoom-visual{background:#0b1220}
.zoom-img{display:block; width:100%; max-height:72vh; object-fit:contain}
.zoom-meta{padding:16px}
.zoom-name{margin:0 0 4px}
.zoom-role{margin:0; color:var(--muted)}
.zoom-close{position:absolute; top:8px; right:8px; padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid var(--line); color:#fff; cursor:pointer}

@media (max-width:980px){
  .team-grid{grid-template-columns:1fr 1fr}
}
/* Safety: keep modal hidden unless JS shows it */
.zoom-modal[hidden] { display: none !important; }

/* Safety: curtain should not block clicks once off-screen */
.curtain { pointer-events: none; }
/* --- Fix hero blobs covering the title --- */
.team-hero { position: relative; }
.team-hero .hero-copy { position: relative; z-index: 2; }

/* Keep blobs as background only (behind text, non-interactive) */
.team-hero .hero-blobs {
  position: absolute;
  inset: -10% -6% -10% -6%;  /* slightly larger to avoid edges */
  z-index: 0;
  pointer-events: none;
}

.team-hero .hero-blobs .blob {
  filter: blur(12px);
  opacity: .65;              /* soften blob so text reads clearly */
  mix-blend-mode: normal;    /* avoid blending over text */
}

/* Extra readability for the heading/subtitle on dark + glow blobs */
.team-hero .hero-title,
.team-hero .sub {
  position: relative;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.about-hero {
  position: relative;
}
.logo img {
  height: 95px;
  width: auto;
  display: block;
  transition: 0.3s ease;
}


.logo img:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px rgba(255, 120, 60, 0.65));
}

.about-hero::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,150,80,0.22), transparent 70%);
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.6;
}
/* Reset list defaults */
.nav-links { list-style: none; margin: 0; padding: 0; }

/* Header layout */
.site-header { position: sticky; top: 0; z-index: 50; }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 12px 20px;
  background: linear-gradient(180deg, rgba(9,13,21,.92), rgba(9,13,21,.82));
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}

/* Logo sizing */
.logo img { height: 36px; width: auto; display: block; }

/* Horizontal links */
.nav-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nav-links a {
  text-decoration: none;
  color: #E7EDF7;
  padding: 8px 6px;
  font-weight: 600;
  opacity: .9;
}
.nav-links a:hover { opacity: 1; }
.nav-links a.active { border-bottom: 2px solid #FFB652; }

/* CTA button */
.nav-cta {
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(90deg, #FFB652, #FF6A4A);
  color: #0b0f16; font-weight: 800; text-decoration: none;
  border: 1px solid rgba(255,255,255,.08);
}

/* Mobile (stack neatly) */
@media (max-width: 860px) {
  .nav { flex-wrap: wrap; gap: 12px; }
  .nav-links { width: 100%; justify-content: flex-start; gap: 14px; }
  .nav-cta { margin-left: auto; }
}
.contact-section {
  padding: 8vh 2vw;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.contact-left {
  flex: 1;
}

.contact-left h2 { font-size: 34px; font-weight: 700; }

.contact-left p { margin: 10px 0; opacity: .85; }

.contact-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-form .row {
  display: flex;
  gap: 14px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 15px;
}

.submit-btn {
  background: linear-gradient(90deg,#FFB652,#FF6A4A);
  border: none;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.socials img {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  opacity: .9;
  transition: .3s;
}

.socials img:hover { opacity: 1; }

@media(max-width:850px) {
  .contact-section {
    flex-direction: column;
  }
  .contact-form .row {
    flex-direction: column;
  }
}
/* base layout (you likely already have some of these) */
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;
     padding:12px 20px;background:linear-gradient(180deg,rgba(9,13,21,.92),rgba(9,13,21,.82));
     border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.logo img{height:36px;display:block}
.nav-links{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;color:#E7EDF7;font-weight:600;opacity:.92}
.nav-links a:hover{opacity:1}
.nav-cta{padding:10px 14px;border-radius:10px;background:linear-gradient(90deg,#FFB652,#FF6A4A);
         color:#0b0f16;font-weight:800;text-decoration:none;border:1px solid rgba(255,255,255,.08)}
/* tiny flexible spacer to push CTA right if needed */
.nav-links .spacer{flex:1}

/* dropdown (used for compact shows) */
.shows-compact details{position:relative}
.shows-compact summary{list-style:none;cursor:pointer;color:#E7EDF7;font-weight:700}
.shows-compact summary::-webkit-details-marker{display:none}
.shows-compact .dropdown{position:absolute;left:0;top:115%;min-width:220px;
  padding:8px;background:rgba(12,18,30,.96);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;backdrop-filter:blur(6px);display:grid;gap:6px;z-index:30}
.shows-compact .dropdown a{padding:10px 12px;border-radius:10px}
.shows-compact .dropdown a:hover{background:rgba(255,255,255,.06)}

/* responsive logic:
   - Desktop (≥1100px): show all four show links, hide compact dropdown
   - Tablet/Mobile (<1100px): hide show links, show compact dropdown
*/
@media (min-width:1100px){
  .shows-compact{display:none}
}
@media (max-width:1099px){
  .show-link{display:none}
  .shows-compact{display:block}
  .nav{flex-wrap:wrap}
  .nav-cta{margin-left:auto}
}
/* ---------- Testimonials ---------- */
.testimonials{
  padding: 56px 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.testimonials .hd{ margin: 0 0 6px; }
.testimonials .stars{
  text-align: center;
  color: #FFC83D;            /* bright yellow stars */
  font-size: 22px;
  letter-spacing: 4px;
  margin-bottom: 18px;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* Smooth, non-clipping ticker */
.ticker{
  overflow: hidden;          /* hides overflow so nothing bleeds */
  padding: 6px 0;
}
.ticker-track{
  display: flex;
  align-items: stretch;
  gap: 14px;
  /* infinite marquee that is smooth on all devices */
  animation: tMarquee 36s linear infinite;
  will-change: transform;
}
@keyframes tMarquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* with enough cards this will look continuous */
}

/* Review cards */
.testimonials blockquote{
  flex: 0 0 auto;            /* prevents flex from squeezing the card */
  min-width: 360px;          /* keeps a good readable width */
  max-width: 520px;          /* prevents overly wide lines */
  box-sizing: border-box;
  margin: 0 0 0 0;
  padding: 16px 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: var(--ink, #eaf1ff);
  line-height: 1.55;
  white-space: normal;       /* allow wrapping (prevents overflow) */
  word-break: break-word;    /* just in case of long words */
}
.testimonials blockquote cite{
  display: block;
  margin-top: 8px;
  color: var(--muted, #a7b4c6);
  font-style: normal;
  font-size: 14px;
}

/* Mobile friendliness */
@media (max-width: 600px){
  .testimonials blockquote{ min-width: 260px; padding: 14px 14px; }
  .testimonials .stars{ font-size: 18px; letter-spacing: 3px; }
}

/* ==== TEAM GRID AVATARS – RECTANGLE FRAME LIKE VINIT ==== */

.team-grid .avatar-wrap {
  position: relative;
  width: 230px;          /* frame width */
  height: 280px;         /* frame height (change if you want more/less) */
  margin: 0 auto 16px;
  display: flex;
  align-items: flex-end; /* keep feet near bottom */
  justify-content: center;
  overflow: visible;     /* so image can breathe a bit */
}

/* Orange circle background */
.team-grid .avatar-wrap .blob-bg {
  position: absolute;
  inset: auto;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #ffb652, #ff6a4a);
  filter: drop-shadow(0 10px 25px rgba(0,0,0,0.4));
}

/* Actual photo */
.team-grid .avatar-wrap .avatar {
  position: relative;
  width: 85%;            /* how wide the person looks */
  height: 100%;
  object-fit: contain;   /* show full body, no cutting */
  object-position: bottom center;
  border-radius: 16px;   /* small rounding around the photo */
}
/* ================= REAL FIX – MAKE ALL TEAM PHOTOS SQUARE ================= */

.team-grid .person .avatar-wrap {
  width: 240px !important;         /* Square size */
  height: 240px !important;
  aspect-ratio: 1/1 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  margin: 0 auto 14px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(4px) !important;
}

/* Make orange circle fit square */
.team-grid .person .avatar-wrap .blob-bg {
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  opacity: .88 !important;
}

/* Make actual photo fit beautifully */
.team-grid .person .avatar-wrap .avatar {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;        /* <– PERFECT FIX */
  object-position: top center !important;
  border-radius: 20px !important;
}
/* ===== ULTRA CLEAN TEAM GRID – FULL SQUARE PHOTO ===== */

.team-grid .person .avatar-wrap {
  position: relative !important;
  width: 200px !important;          /* make all squares same size */
  aspect-ratio: 1 / 1 !important;   /* perfect square */
  margin: 10px auto 14px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #0f1522 !important;    /* fallback dark bg */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35) !important;
}

/* Remove orange blob completely */
.team-grid .person .avatar-wrap .blob-bg {
  display: none !important;
}

/* Make entire square filled with photo */
.team-grid .person .avatar-wrap .avatar {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;         /* full-bleed photo */
  object-position: center !important;   /* nice crop: center */
  border-radius: 18px !important;
}

/* Fix zoom modal also */
.zoom-img {
  object-fit: contain !important;
}
/* REAL FIX — PERFECT SQUARE TEAM PHOTOS */
.clean-avatar {
  width: 220px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto 12px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: #111827 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}

/* image inside square */
.clean-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 18px !important;
}

/* remove old orange circle everywhere */
.blob-bg {
  display: none !important;
}