/* Our Team — light premium edition
   300vh sticky diagonal stack (desktop), 100vh title, mobile carousel.
   Easing = easeOutQuart. */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root{
  --easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --brand-yellow:#1c1917;
  --brand-dark-blue:#f6f3ee;
  --text-secondary:rgba(28,25,23,0.62);
  --text-disabled:rgba(28,25,23,0.32);
  --card-bg:#e9e2d4;
  --line-soft:rgba(28,25,23,0.14);
  --gap-x:1.6rem;
  --padding-x:1.6rem;
  --font-sans:"Inter Tight", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-italic:"Instrument Serif", Georgia, serif;
}

html{ font-size:max(2.6666666667vw,1px); }
@media(min-width:768px){ html{ font-size:max(1.3020833333vw,1px); } }
@media(min-width:1200px){ html{ font-size:max(0.5208333333vw,1px); } }

html, body{
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(ellipse 70% 45% at 50% 30%, rgba(255,255,255,0.9), transparent 70%),
    radial-gradient(ellipse 40% 30% at 85% 15%, rgba(212,196,172,0.30), transparent 60%),
    var(--brand-dark-blue);
  color:var(--brand-yellow);
  font-family:var(--font-sans);
  overscroll-behavior:none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar{ display:none; }
body{ overflow-x:clip; }
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

.sec-index, .team__index{
  display:flex; align-items:center; gap:1.2rem;
  font-family:var(--font-italic); font-style:italic; font-weight:500;
  font-size:1.2rem; line-height:1; letter-spacing:normal;
}
.sec-index i, .team__index i{
  display:block; width:2rem; height:.1rem; background:var(--brand-yellow);
}

/* ============ section ============ */
.team-section{ position:relative; max-width:100vw; }

/* ---- 01 title : Team_fullScreenMedia ---- */
.full-screen-media{ position:relative; width:100%; height:100svh; }
.full-screen-media__title{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100%; text-align:center;
  font-weight:600; line-height:1em; letter-spacing:-.03em;
  font-size:3.2rem; max-width:15.5rem;
}
@media(min-width:768px){ .full-screen-media__title{ font-size:4.8rem; max-width:21.5rem; } }
@media(min-width:1200px){ .full-screen-media__title{ display:flex; justify-content:center; font-size:8.8rem; max-width:64.5rem; } }
.full-screen-media__title h2{ font:inherit; }
.full-screen-media__title .word{ display:inline-block; will-change:transform, opacity, filter; }
.full-screen-media__title [data-title-line]{ display:inline-block; white-space:nowrap; }

/* ---- 02 desktop sticky stack : Team_team ---- */
.team{ position:relative; width:100%; height:auto; display:none; }
@media(min-width:1200px){ .team{ display:block; height:300svh; } }
.team__content{
  position:sticky; top:0; left:0; width:100vw; height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.team__index{ display:none; }

/* cards — exact original math:
   --rel-pos = index - progress * last-index
   --offset-step = 100% + stack-gap
   translateX(offset-x) translateY(offset-y) => diagonal */
.team__cards{
  --last-index:calc(var(--total-items) - 1);
  --width:50.4rem; --height:55rem; --stack-gap:3.2rem;
  width:var(--width); height:var(--height);
  display:grid; grid-template-columns:1fr; grid-template-rows:1fr;
}
.team__cards > *{ grid-column:1/-1; grid-row:1/-1; }
.team__card{
  --offset-step:calc(100% + var(--stack-gap, 3.2rem));
  --rel-pos:calc(var(--index) - var(--progress, 0) * var(--last-index));
  --offset-x:calc(var(--offset-step) * var(--rel-pos));
  --offset-y:calc(var(--offset-step) * var(--rel-pos));
  width:var(--width); height:var(--height);
  position:relative; will-change:transform;
  transform:translateX(var(--offset-x)) translateY(var(--offset-y)) translateZ(0);
}
.team__scene{ position:relative; width:100%; height:100%; overflow:clip; background:var(--card-bg); border-radius:1.2rem; box-shadow:0 2.4rem 6rem rgba(28,25,23,0.14); }
.team__obj{
  position:relative; width:100%; height:100%; will-change:transform;
  transform:translateX(calc(var(--scroll-velocity, 0) * .9px)) translateY(calc(var(--scroll-velocity, 0) * .9px)) translateZ(0) scale(1.1);
}
.team__obj img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(100%); opacity:.3; will-change:filter, opacity;
  user-select:none; pointer-events:none;
}

/* descriptions — absolute right like original (left:150rem top:26.7rem) */
.team__info{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.team__descs{
  position:absolute; left:150rem; top:26.7rem; width:24rem; text-align:left;
  display:grid; grid-template-columns:1fr; grid-template-rows:1fr;
  font-size:1.8rem; font-weight:400; line-height:1.4em; letter-spacing:-.036rem;
}
.team__descs > *{ grid-column:1/-1; grid-row:1/-1; }
.desc-item .word{ display:inline-block; will-change:opacity; }
.desc-content{ opacity:0; will-change:opacity; }

/* giant counter bottom-left */
.team__counter{
  position:absolute; bottom:7.6rem; left:18rem;
  display:flex; font-size:24rem; font-weight:600; line-height:.9em; letter-spacing:-.72rem;
}
.counter-digit{ display:inline-block; vertical-align:top; }
.counter-viewport{ overflow:hidden; height:.9em; line-height:.9em; }
.counter-strip{ will-change:transform; }
.counter-item{ display:flex; align-items:center; justify-content:flex-start; height:.9em; line-height:.9em; }

/* ---- 03 mobile / tablet : styles_mobile ---- */
.m-team{ width:100%; padding:12rem var(--padding-x); display:flex; flex-direction:column; gap:4rem; }
@media(min-width:768px){ .m-team{ padding:14.7rem var(--padding-x) 3.2rem; gap:2.9rem; } }
@media(min-width:1200px){ .m-team{ display:none; } }
.m-team__top{ width:100%; display:flex; align-items:center; justify-content:center; }
.m-team__detail{ width:100%; display:flex; flex-direction:column; align-items:center; gap:3.2rem; }
@media(min-width:768px){ .m-team__detail{ gap:10.9rem; } }

.m-carousel{
  --carousel-index:0; --slide-gap:0.8rem;
  position:relative; width:calc(100% + var(--slide-gap)); margin-right:calc(var(--slide-gap) * -1);
  overflow:hidden;
}
@media(min-width:768px){ .m-carousel{ --slide-gap:1.2rem; } }
.m-carousel__track{
  display:flex; gap:var(--slide-gap); width:100%;
  transform:translateX(calc(var(--carousel-index) * -100%));
  transition:transform 1.4s var(--easeOutQuart); will-change:transform;
}
.m-carousel__slide{ position:relative; flex:0 0 calc(100% - var(--slide-gap)); width:calc(100% - var(--slide-gap)); aspect-ratio:343/374; overflow:hidden; background:var(--card-bg); border-radius:1.2rem; box-shadow:0 1.6rem 4rem rgba(28,25,23,0.12); }
@media(min-width:768px){ .m-carousel__slide{ aspect-ratio:522/569; } }
.m-carousel__slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.m-para{ font-size:1.4rem; line-height:140%; letter-spacing:-.028rem; padding-right:6rem; width:100%; }
@media(min-width:768px){ .m-para{ font-size:1.6rem; letter-spacing:-.032rem; padding-right:14rem; } }
.m-para__stack{ display:grid; }
.m-para__item{
  grid-area:1/1; opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(.8rem);
  transition:opacity .35s var(--easeOutQuart), transform .35s var(--easeOutQuart), visibility 0s var(--easeOutQuart) .35s;
  will-change:opacity, transform;
}
.m-para__item.is-active{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  transition:opacity .35s var(--easeOutQuart), transform .35s var(--easeOutQuart), visibility 0s var(--easeOutQuart) 0s;
}

.m-controls{ width:100%; display:flex; align-items:center; justify-content:space-between; }
.m-btn{
  width:4.8rem; height:4.8rem; border:1px solid var(--brand-yellow);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .2s var(--easeOutQuart); will-change:opacity;
}
.m-btn:disabled{ opacity:.3; cursor:default; }
.m-lines{ display:flex; align-items:center; justify-content:center; gap:.4rem; }
.m-line{ width:1.2rem; height:1px; background:rgba(28,25,23,0.25); transition:width .2s var(--easeOutQuart), background-color .2s var(--easeOutQuart); }
.m-line.is-active{ width:2rem; background:var(--brand-yellow); }

@media (prefers-reduced-motion: reduce){
  .m-carousel__track, .m-para__item, .team__card, .team__obj{ transition:none !important; }
}