/* =====================================================================
   STEP 2 (CSS): Paste this at the VERY END of about-revamp.css.
   Optional cleanup: you can delete the old .about-team, .founders-grid,
   .team-grid, .team-card, .team-photo, .team-divider rules. The new
   section uses .tm-* classes only, so nothing clashes either way.
   ===================================================================== */

.tm{
  --tm-olive:#8b9d3b;
  --tm-olive-d:#5f6f26;
  --tm-olive-l:#c9d68a;
  --tm-dark:#0a1f17;
  --tm-cream:#f7f0e3;
  --tm-muted:#68746b;
  --tm-ease:cubic-bezier(.2,.7,.2,1);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(70px,9vw,130px) 0;
  background:#e5e9d2;
}
.tm-wrap{width:min(1240px,calc(100% - 48px));margin-inline:auto}

/* ---------- Background decoration ---------- */
.tm-blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(80px);pointer-events:none;animation:tmFloat 24s ease-in-out infinite alternate}
.tm-blob.a{width:440px;height:440px;background:var(--tm-olive-l);opacity:.45;top:-140px;right:-100px}
.tm-blob.b{width:380px;height:380px;background:var(--tm-olive);opacity:.2;bottom:-140px;left:-120px;animation-duration:30s}
.tm-ring{position:absolute;z-index:-1;right:7%;top:110px;width:190px;height:190px;border-radius:50%;border:1.5px dashed rgba(139,157,59,.55);pointer-events:none;animation:tmSpin 45s linear infinite}
.tm-ring::after{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--tm-olive)}
@keyframes tmFloat{to{transform:translate(70px,50px) scale(1.18)}}
@keyframes tmSpin{to{transform:rotate(360deg)}}

/* ---------- Heading ---------- */
.tm-head{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:24px 48px;
  align-items:end;
  margin-bottom:clamp(44px,5vw,64px);
}
.tm-head h2{
  margin:16px 0 0;
  color:var(--tm-dark);
  font-size:clamp(44px,6vw,88px);
  line-height:.95;
  letter-spacing:-.065em;
}
.tm-head h2 em{color:var(--tm-olive);font-style:normal}
.tm-line{display:block;overflow:hidden;padding:.05em 0 .12em;margin-bottom:-.07em}
.tm-line>span,.tm-line em>span{display:inline-block}
.tm-sub{
  justify-self:end;
  max-width:440px;
  margin:0;
  color:var(--tm-muted);
  font-size:18px;
  line-height:1.7;
}

/* ---------- Divider labels ---------- */
.tm-divider{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 24px;
  color:var(--tm-olive-d);
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.tm-divider::before{content:"";width:10px;height:10px;flex:none;border-radius:50%;background:var(--tm-olive);box-shadow:0 0 0 5px rgba(139,157,59,.2);animation:tmPulse 2.6s ease-in-out infinite}
.tm-divider::after{content:"";flex:1;height:1px;background:rgba(10,31,23,.22);transform-origin:left}
.tm-founders + .tm-divider{margin-top:clamp(56px,6vw,80px)}
@keyframes tmPulse{50%{box-shadow:0 0 0 10px rgba(139,157,59,0)}}

/* ---------- Grids (same gap + same outer edges everywhere) ---------- */
.tm-founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

/* ---------- Card ---------- */
.tm-card{min-width:0}
.tm-card-in{
  --rx:0deg;--ry:0deg;--ty:0px;
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:12px;
  border-radius:26px;
  background:var(--tm-cream);
  border:1px solid rgba(10,31,23,.08);
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty));
  transition:transform .45s var(--tm-ease),box-shadow .45s var(--tm-ease),border-color .45s var(--tm-ease);
  will-change:transform;
}
.tm-card-in:hover{--ty:-8px;border-color:rgba(139,157,59,.6);box-shadow:0 30px 55px -24px rgba(10,31,23,.38)}
/* cursor glow */
.tm-card-in::after{
  content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(139,157,59,.22),transparent 60%);
  transition:opacity .4s var(--tm-ease);
}
.tm-card-in:hover::after{opacity:1}

/* ---------- Photo (identical 4:5 crop for everyone) ---------- */
.tm-photo{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:4/5;background:#d9dfc3}
.tm-photo img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center 20%;
  transition:transform 1.3s var(--tm-ease),filter .8s var(--tm-ease);
}
.tm-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(to top,rgba(10,31,23,.55),transparent 55%);
  transition:opacity .5s var(--tm-ease);
}
.tm-card-in:hover .tm-photo img{transform:scale(1.07)}
.tm-card-in:hover .tm-photo::after{opacity:1}

.tm-num{
  position:absolute;top:14px;left:14px;z-index:2;
  width:36px;height:36px;display:grid;place-items:center;
  border-radius:50%;
  background:rgba(10,31,23,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font-size:12px;font-weight:700;
  transition:transform .5s var(--tm-ease),background .4s var(--tm-ease);
}
.tm-card-in:hover .tm-num{background:var(--tm-olive);transform:scale(1.12) rotate(-8deg)}

/* ---------- Text ---------- */
.tm-info{display:flex;flex-direction:column;gap:6px;padding:18px 8px 8px}
.tm-info h3{
  position:relative;width:max-content;max-width:100%;
  margin:0;color:var(--tm-dark);
  font-size:clamp(18px,1.6vw,21px);font-weight:700;line-height:1.25;
}
.tm-info h3::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--tm-olive);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--tm-ease);
}
.tm-card-in:hover .tm-info h3::after{transform:scaleX(1)}
.tm-info p{
  margin:0;color:var(--tm-muted);
  font-size:14px;font-weight:500;line-height:1.5;
  transition:color .4s var(--tm-ease),transform .5s var(--tm-ease);
}
.tm-card-in:hover .tm-info p{color:var(--tm-olive-d);transform:translateY(-2px)}

/* ---------- Founder cards: horizontal, photo left / text right ---------- */
.tm-founders .tm-card-in{flex-direction:row;align-items:stretch;gap:20px}
.tm-founders .tm-photo{flex:0 0 46%}
.tm-founders .tm-info{flex:1;min-width:0;justify-content:flex-end;padding:20px 16px 20px 4px}
.tm-founders .tm-info h3{width:auto;font-size:clamp(22px,2.4vw,32px);line-height:1.12;letter-spacing:-.03em}
.tm-founders .tm-info p{font-size:15px}
.tm-tag{
  align-self:flex-start;margin-bottom:auto;
  padding:7px 12px;border-radius:99px;
  background:rgba(139,157,59,.18);color:var(--tm-olive-d);
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}

/* ---------- Entrance animations (only when JS runs + motion allowed) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* heading: lines slide up from behind a mask */
  .js .tm-line>span,.js .tm-line em>span{transform:translateY(112%);transition:transform 1.05s var(--tm-ease)}
  .js .tm-line:nth-child(2)>span,.js .tm-line:nth-child(2) em>span{transition-delay:.14s}
  .js .tm-head.in .tm-line>span,.js .tm-head.in .tm-line em>span{transform:none}
  .js .tm-sub{opacity:0;transform:translateY(22px);transition:opacity .9s var(--tm-ease) .35s,transform .9s var(--tm-ease) .35s}
  .js .tm-head.in .tm-sub{opacity:1;transform:none}
  .js .tm-head .about-eyebrow{opacity:0;transform:translateY(14px);transition:opacity .7s var(--tm-ease),transform .7s var(--tm-ease)}
  .js .tm-head.in .about-eyebrow{opacity:1;transform:none}

  /* divider line draws itself */
  .js .tm-divider::after{transform:scaleX(0);transition:transform 1.4s var(--tm-ease) .15s}
  .js .tm-divider.in::after{transform:scaleX(1)}
  .js .tm-divider{opacity:0;transition:opacity .6s var(--tm-ease)}
  .js .tm-divider.in{opacity:1}

  /* cards: rise + fade, photo curtain wipe, image settles from zoomed-in */
  .js .tm-card{
    opacity:0;transform:translateY(44px);
    transition:opacity .8s var(--tm-ease),transform .95s var(--tm-ease);
    transition-delay:calc(var(--i,0) * 120ms);
  }
  .js .tm-card.in{opacity:1;transform:none}

  .js .tm-photo{
    clip-path:inset(0 0 100% 0 round 16px);
    transition:clip-path 1.15s var(--tm-ease);
    transition-delay:calc(var(--i,0) * 120ms + 160ms);
  }
  .js .tm-card.in .tm-photo{clip-path:inset(0 0 0 0 round 16px)}

  .js .tm-photo img{transform:scale(1.25);filter:saturate(.7)}
  .js .tm-card.in .tm-photo img{
    transform:scale(1);filter:none;
    transition-delay:calc(var(--i,0) * 120ms + 160ms);
  }
  .js .tm-card.in:hover .tm-photo img{transform:scale(1.07)}

  .js .tm-info{opacity:0;transform:translateY(14px);transition:opacity .8s var(--tm-ease),transform .8s var(--tm-ease);transition-delay:calc(var(--i,0) * 120ms + 450ms)}
  .js .tm-card.in .tm-info{opacity:1;transform:none}

  /* once the entrance has finished, remove all stagger delays so hover is instant */
  .tm-card.done,.tm-card.done *{transition-delay:0s!important}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .tm-head{grid-template-columns:1fr;align-items:start}
  .tm-sub{justify-self:start}
  .tm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tm-founders .tm-card-in{gap:14px}
  .tm-founders .tm-photo{flex-basis:44%}
  .tm-ring{width:130px;height:130px;top:70px;right:5%}
}
@media (max-width:620px){
  .tm{padding:70px 0}
  .tm-wrap{width:calc(100% - 48px)}
  .tm-founders{grid-template-columns:1fr;gap:16px}
  .tm-grid{gap:12px}
  .tm-card-in{padding:8px;border-radius:22px}
  .tm-info{padding:14px 6px 6px}
  .tm-info h3{font-size:16px}
  .tm-info p{font-size:13px}
  .tm-founders .tm-photo{flex-basis:42%}
  .tm-founders .tm-info h3{font-size:22px}
  .tm-num{width:30px;height:30px;font-size:11px;top:10px;left:10px}
  .tm-ring{display:none}
  .tm-sub{font-size:16px}
}

/* ---------- Reduced motion: no movement at all ---------- */
@media (prefers-reduced-motion:reduce){
  .tm *,.tm *::before,.tm *::after{animation:none!important;transition:none!important}
  .tm-card-in{transform:none}
}