/* ==========================================================================
   SAN Media Solution — Team
   One section, two artworks: `team 1.PNG` (1983 × 793, the founder and the
   creative head — `--f` is one of its pixels) over `team 2.PNG` (2060 × 763,
   the team — `--c2` is one of its pixels). Every measurement below is the
   artwork's own.
   ========================================================================== */

.squad { position: relative; background: #fdfdfd; color: #111; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.heads, .crew { position: relative; container-type: inline-size; overflow: hidden; }
.heads { --f: calc(100vw / 1983); --u: var(--f); height: calc(793 * var(--f)); }
.crew { --c2: calc(100vw / 2060); --u: var(--c2); height: calc(763 * var(--c2)); }
@supports (width: 1cqw) {
  .heads { --f: calc(1cqw / 19.83); }
  .crew { --c2: calc(1cqw / 20.6); }
}
.squad.is-solo .heads { margin-top: 94px; }

/* ── shared pieces ─────────────────────────────────────────────────────── */
.t-kicker { display: flex; align-items: center; margin: 0; font-weight: 500; text-transform: uppercase; line-height: 1; color: #656569; white-space: nowrap; }
.t-kicker i { display: block; background: var(--lime); }
/* the section foots carry the line at the left and the action at the right
   (the brand lockup that used to open them was taken out at the client's request) */
.t-foot { display: flex; align-items: center; justify-content: flex-end; color: #111; }
.t-foot__line { position: absolute; left: 0; translate: 0 -50%; display: flex; align-items: center; margin: 0; text-transform: uppercase; line-height: 1; white-space: nowrap; color: #6a6a6e; }
.t-foot__line i { display: block; height: 1.5px; background: #111; }
.t-foot__line i.is-lime { background: var(--lime); }
.t-rail { display: flex; align-items: center; margin: 0; text-transform: uppercase; line-height: 1; white-space: nowrap; color: #5a5a5e; }
.t-rail i { display: block; background: var(--lime); }
.t-foot .c-go { color: #333; }
.t-foot .c-go__ring { border-color: #222; color: #111; }
.t-foot .c-go:hover .c-go__ring, .t-foot .c-go:focus-visible .c-go__ring { background: #111; color: #fff; }

/* ══ the founder and the creative head ═════════════════════════════════ */
.heads__arc {
  position: absolute;
  left: calc(-138 * var(--f)); top: calc(96 * var(--f));
  width: calc(172 * var(--f)); height: calc(172 * var(--f));
  border: calc(2 * var(--f)) solid var(--lime); border-radius: 50%;
  pointer-events: none;
}
.heads__copy, .heads__side { position: absolute; inset: 0; pointer-events: none; }
.heads__copy > *, .heads__side > * { pointer-events: auto; }
.heads__kicker { position: absolute; left: calc(82 * var(--f)); top: calc(56.75 * var(--f)); gap: calc(24 * var(--f)); font-size: calc(16.5 * var(--f)); letter-spacing: .22em; }
.heads__kicker i { width: calc(53 * var(--f)); height: calc(1.5 * var(--f)); }
.heads__name {
  position: absolute; left: calc(82 * var(--f)); top: calc(97.3 * var(--f));
  margin: 0;
  font-size: calc(56 * var(--f)); font-weight: 800; line-height: calc(60 * var(--f)); letter-spacing: -.05em; text-transform: uppercase;
  color: #0a0a0a;
}
.heads__name span { display: block; white-space: nowrap; }
.heads__name em { font-style: normal; background: linear-gradient(90deg, #3f8f40 0%, #4a9d3a 55%, #63b81c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* the second profile: kicker, name, credentials, bio — the artwork's rhythm */
.heads__name--second { left: calc(1425 * var(--f)); top: calc(150 * var(--f)); font-size: calc(57 * var(--f)); }
.heads__name--second em { background: none; -webkit-background-clip: initial; background-clip: initial; color: #64c01b; }
.heads__roles { position: absolute; left: calc(83 * var(--f)); top: calc(219.8 * var(--f)); margin: 0; font-size: calc(23 * var(--f)); font-weight: 500; line-height: calc(27 * var(--f)); letter-spacing: -.012em; color: #4c4e57; white-space: nowrap; }
.heads__roles--second { left: calc(1425 * var(--f)); top: calc(270 * var(--f)); font-size: calc(21 * var(--f)); line-height: calc(26 * var(--f)); }
.heads__para { position: absolute; left: calc(83 * var(--f)); top: calc(294.35 * var(--f)); margin: 0; font-size: calc(19.5 * var(--f)); line-height: calc(25.5 * var(--f)); letter-spacing: -.012em; color: #696a72; white-space: nowrap; }
.heads__para--second { left: calc(1426 * var(--f)); top: calc(310.6 * var(--f)); line-height: calc(25 * var(--f)); }
.heads__sign { position: absolute; left: calc(72 * var(--f)); top: calc(440 * var(--f)); width: calc(244 * var(--f)); height: auto; }
.heads__signed { position: absolute; left: calc(86 * var(--f)); top: calc(548 * var(--f)); margin: 0; line-height: 1; white-space: nowrap; }
.heads__signed b { display: block; font-size: calc(15.5 * var(--f)); font-weight: 700; letter-spacing: -.01em; color: #111; }
.heads__signed span { display: block; margin-top: calc(6 * var(--f)); font-size: calc(15.5 * var(--f)); color: #4a4a4e; }
.heads__watch { position: absolute; left: calc(384 * var(--f)); top: calc(479 * var(--f)); display: flex; align-items: center; gap: calc(14 * var(--f)); text-decoration: none; color: #111; }
.heads__ring {
  display: grid; place-items: center;
  width: calc(69 * var(--f)); height: calc(69 * var(--f));
  border-radius: 50%; box-sizing: border-box;
  border: calc(2 * var(--f)) solid var(--lime);
  box-shadow: 0 0 calc(18 * var(--f)) calc(1 * var(--f)) rgba(152, 240, 20, .45);
  background: #fff;
  transition: transform .5s var(--e-out), box-shadow .5s;
}
.heads__ring svg { width: calc(20 * var(--f)); height: auto; fill: #0c0c0c; margin-left: calc(3 * var(--f)); }
.heads__watch:hover .heads__ring, .heads__watch:focus-visible .heads__ring { transform: scale(1.06); box-shadow: 0 0 calc(26 * var(--f)) calc(2 * var(--f)) rgba(152, 240, 20, .6); }
.heads__watch-label { font-size: calc(18 * var(--f)); font-weight: 700; line-height: calc(22 * var(--f)); letter-spacing: -.01em; white-space: nowrap; }

/* the pair, in a frame that never moves */
.heads__frame { position: absolute; left: calc(613 * var(--f)); top: 0; width: calc(753 * var(--f)); height: calc(715 * var(--f)); overflow: hidden; }
.heads__pair { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.heads__wipe, .heads__flash { position: absolute; inset: 0; background: #fff; pointer-events: none; opacity: 0; }

/* the creative head */
.heads__more { position: absolute; left: calc(1784 * var(--f)); top: calc(30.5 * var(--f)); margin: 0; font-size: max(9px, calc(12.5 * var(--f))); font-weight: 500; line-height: calc(20 * var(--f)); letter-spacing: .22em; text-transform: uppercase; color: #6a6a6e; white-space: nowrap; }
.heads__more span { display: block; }
.heads__kicker2 { position: absolute; left: calc(1425 * var(--f)); top: calc(125 * var(--f)); gap: calc(15 * var(--f)); font-size: max(calc(14 * var(--f)), 10px); letter-spacing: .25em; }
.heads__kicker2 i { width: calc(53 * var(--f)); height: calc(1.5 * var(--f)); }
.heads__more i { display: block; width: calc(50 * var(--f)); height: calc(1.5 * var(--f)); margin-top: calc(22 * var(--f)); background: var(--lime); }
.heads__card {
  position: absolute; left: calc(1863 * var(--f)); top: calc(560 * var(--f));
  width: calc(150 * var(--f)); height: calc(155 * var(--f));
  margin: 0; box-sizing: border-box; padding: calc(16 * var(--f)) 0 0 calc(17 * var(--f));
  border-radius: calc(22 * var(--f)) 0 0 calc(22 * var(--f));
  background: #0d0d0d; color: #fff;
  font-size: max(10px, calc(15 * var(--f))); font-weight: 800; line-height: calc(19 * var(--f)); letter-spacing: .1em; text-transform: uppercase;
}
.heads__card span { display: block; width: calc(86 * var(--f)); text-align: center; }
.heads__palm { position: absolute; left: calc(1770 * var(--f)); top: calc(140 * var(--f)); width: calc(213 * var(--f)); height: auto; pointer-events: none; }
.heads__foot { position: absolute; left: calc(55 * var(--f)); right: calc(84 * var(--f)); top: calc(724 * var(--f)); height: calc(53 * var(--f)); }
.heads__foot .t-foot__line { left: calc(28 * var(--f)); top: calc(25 * var(--f)); gap: calc(120 * var(--f)); font-size: max(9px, calc(13.5 * var(--f))); font-weight: 500; letter-spacing: .32em; }
.heads__foot .t-foot__line i { width: calc(87 * var(--f)); }
.heads__foot .t-rail { gap: calc(20 * var(--f)); font-size: max(9px, calc(13 * var(--f))); font-weight: 600; letter-spacing: .3em; }
.heads__foot .t-rail i { width: calc(1.5 * var(--f)); height: calc(12 * var(--f)); }

/* ══ the team ═══════════════════════════════════════════════════════════ */
.crew__palm { position: absolute; top: 0; height: 100%; width: auto; pointer-events: none; }
.crew__palm--left { left: 0; }
.crew__palm--right { right: 0; }
.crew__copy { position: absolute; inset: 0; pointer-events: none; }
.crew__copy > * { pointer-events: auto; }
.crew__kicker { position: absolute; left: calc(85 * var(--c2)); top: calc(178.75 * var(--c2)); gap: calc(18 * var(--c2)); font-size: calc(16.5 * var(--c2)); letter-spacing: .33em; color: #2a2a2a; }
.crew__kicker i { width: calc(55 * var(--c2)); height: calc(1.5 * var(--c2)); }
.crew__title {
  position: absolute; left: calc(85 * var(--c2)); top: calc(207.35 * var(--c2));
  margin: 0;
  font-size: calc(56 * var(--c2)); font-weight: 800; line-height: calc(68 * var(--c2)); letter-spacing: -.05em; text-transform: uppercase;
  color: #0a0a0a;
}
.crew__title span { display: block; white-space: nowrap; }
.crew__title em { font-style: normal; color: #6ad129; }
.crew__sub { position: absolute; left: calc(86 * var(--c2)); top: calc(361.4 * var(--c2)); margin: 0; font-size: calc(19.5 * var(--c2)); line-height: 1.3; letter-spacing: -.012em; color: #5b5b60; white-space: nowrap; }
.pill--crew {
  position: absolute; left: calc(86 * var(--c2)); top: calc(443 * var(--c2));
  height: calc(59 * var(--c2)); padding: 0 calc(32 * var(--c2)) 0 calc(39 * var(--c2));
  gap: calc(25 * var(--c2));
  font-size: calc(19 * var(--c2)); font-weight: 600; letter-spacing: -.01em; text-decoration: none;
}
.pill--crew svg { width: calc(33 * var(--c2)); stroke-width: calc(1.8 * var(--c2)); }
.crew__script { position: absolute; left: calc(1712 * var(--c2)); top: calc(30 * var(--c2)); width: calc(283 * var(--c2)); height: auto; pointer-events: none; }

/* the seven cards: each its own rectangle of the artwork, the live plate over the painted one */
/* the cards' layer spans the whole block on wide screens; it must not stand
   between the pointer and the copy's call to action */
.crew__cards { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.tcard {
  position: absolute;
  left: calc(var(--x) * var(--c2)); top: calc(var(--y) * var(--c2));
  width: calc(var(--w) * var(--c2)); height: calc(var(--h) * var(--c2));
}
.crew__shape { position: absolute; width: 0; height: 0; }
/* the picture, in the card's own shape: the photograph as delivered, fitted so
   the face sits high and clear; a soft dark foot behind the plate ties the
   set together */
.tcard__pic { position: absolute; inset: 0; overflow: hidden; clip-path: url(#tcard-shape); background: #e3e4e7; }
.tcard__pic img { position: absolute; left: var(--il); top: var(--it); width: var(--iw); height: auto; max-width: none; display: block; }
.tcard__pic::after { content: ""; position: absolute; inset: 55% 0 0 0; background: linear-gradient(180deg, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, .42) 100%); pointer-events: none; }
.tcard__plate {
  position: absolute;
  left: calc(var(--px) * var(--c2)); top: calc(var(--py) * var(--c2));
  width: calc(var(--pw) * var(--c2)); min-height: calc(var(--ph) * var(--c2));   /* grows for a long name or role */
  box-sizing: border-box; padding: calc(7 * var(--c2)) calc(10 * var(--c2)) calc(7 * var(--c2)) calc(14 * var(--c2));
  display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--c2));
  border-radius: calc(15 * var(--c2));
  background: #fff; box-shadow: 0 calc(4 * var(--c2)) calc(12 * var(--c2)) rgba(0, 0, 0, .14);
  color: #111; text-decoration: none;
  transition: transform .45s var(--e-out), box-shadow .45s;
}

.tcard__who { display: block; min-width: 0; line-height: 1; }
.tcard__who b { display: block; font-size: max(9px, calc(16 * var(--c2))); font-weight: 700; line-height: calc(19 * var(--c2)); letter-spacing: -.02em; white-space: nowrap; }
/* the longest single-word name is set a touch smaller, so it never leaves its plate */
.tcard__who--long b { font-size: max(9px, calc(14.8 * var(--c2))); }
.tcard__who > span { display: block; margin-top: calc(4.5 * var(--c2)); font-size: max(8px, calc(13.5 * var(--c2))); line-height: calc(18 * var(--c2)); letter-spacing: -.02em; color: #3a3a3e; }


.tcard__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; clip-path: url(#tcard-shape); }
.crew__foot { position: absolute; left: calc(55 * var(--c2)); right: calc(94 * var(--c2)); top: calc(660 * var(--c2)); height: calc(60 * var(--c2)); }
.crew__foot .t-foot__line { left: calc(28 * var(--c2)); top: calc(34 * var(--c2)); gap: calc(112 * var(--c2)); font-size: max(9px, calc(16 * var(--c2))); font-weight: 500; letter-spacing: .3em; }
.crew__foot .t-foot__line i { width: calc(112 * var(--c2)); }

/* ── entrances: team.js plays them once, on entry ────────────────────────── */
.squad.is-live [data-in], .squad.is-live [data-side-in], .squad.is-live [data-late], .squad.is-live [data-pair], .squad.is-live [data-tcard] { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .squad [data-in], .squad [data-side-in], .squad [data-late], .squad [data-pair], .squad [data-tcard], .squad .tcard__pic { transform: none !important; opacity: 1 !important; }
  .heads__wipe, .heads__flash, .tcard__flash { display: none; }
}

/* ══ narrow screens: re-laid, not shrunk ═══════════════════════════════ */
@media (max-width: 1080px) {
  .heads, .crew { --pad: clamp(20px, 4vw, 48px); height: auto; }
  .squad.is-solo .heads { margin-top: 0; }
  .heads { display: grid; gap: clamp(24px, 4vh, 40px); padding: clamp(32px, 6vh, 64px) var(--pad) clamp(28px, 5vh, 44px); }
  .heads__arc { display: none; }
  .heads__copy, .heads__side { position: static; inset: auto; pointer-events: auto; display: grid; gap: 14px; justify-items: start; }
  .heads__copy > *, .heads__side > * { position: static !important; }
  .t-kicker { font-size: clamp(10.5px, 1.4vw, 13px); gap: 14px; }
  .t-kicker i { width: 50px; height: 1.5px; }
  .heads__name { font-size: clamp(34px, 6.6vw, 66px); line-height: .98; }
  .heads__name span { white-space: normal; }
  .heads__roles { font-size: clamp(15px, 2.2vw, 21px); line-height: 1.35; white-space: normal; max-width: 40ch; }
  .heads__para { font-size: clamp(14px, 1.9vw, 17px); line-height: 1.45; white-space: normal; max-width: 52ch; }
  .heads__roles br, .heads__para br { display: none; }
  .heads__sign { width: clamp(150px, 20vw, 244px); margin-top: 4px; }
  .heads__signed b { font-size: clamp(13px, 1.7vw, 15px); }
  .heads__signed span { margin-top: 5px; font-size: clamp(12.5px, 1.6vw, 14px); }
  .heads__watch { gap: 14px; margin-top: 6px; }
  .heads__ring { width: 56px; height: 56px; border-width: 2px; box-shadow: 0 0 16px 1px rgba(152, 240, 20, .45); }
  .heads__ring svg { width: 16px; margin-left: 3px; }
  .heads__watch-label { font-size: clamp(14px, 1.9vw, 17px); line-height: 1.2; }
  .heads__stats li:last-child { margin-right: 0; padding-right: 0; }
  .heads__stats b { font-size: clamp(13px, 1.7vw, 15px); line-height: 1.2; }
  .heads__stats span { margin-top: 5px; font-size: clamp(9px, 1.15vw, 10px); line-height: 1.35; }
  .heads__stats li:nth-child(3) span { text-align: left; }
  .heads__stats span br { display: none; }
  .heads__frame { position: relative; left: auto; width: min(100%, 560px); height: auto; aspect-ratio: 753 / 715; justify-self: center; }
  .heads__palm { display: none; }
  .heads__more { font-size: clamp(9.5px, 1.2vw, 11px); line-height: 1.7; }
  .heads__more i { width: 44px; height: 1.5px; margin-top: 10px; }
  .heads__name--second { font-size: clamp(30px, 6vw, 60px); }
  .heads__card { width: auto; height: auto; padding: 16px 22px; border-radius: 14px; font-size: clamp(11px, 1.4vw, 13px); line-height: 1.5; }
  .heads__card span { width: auto; text-align: left; display: inline; }
  .heads__card span::after { content: " "; }
  .heads__foot { position: static; height: auto; padding-top: 22px; border-top: 1px solid #e6e6ea; flex-wrap: wrap; gap: 16px 24px; }
  .heads__foot .t-foot__line { position: static; translate: none; order: 3; width: 100%; gap: 18px; font-size: clamp(9px, 1.2vw, 11px); }
  .heads__foot .t-foot__line i { flex: 1; width: auto; }
  .heads__foot .t-rail { gap: 12px; font-size: clamp(9.5px, 1.2vw, 12px); }
  .heads__foot .t-rail i { width: 1.5px; height: 11px; }

  .crew { display: grid; gap: clamp(22px, 4vh, 36px); padding: clamp(32px, 6vh, 64px) 0 clamp(28px, 5vh, 44px); }
  .crew__palm { display: none; }
  .crew__copy { position: static; inset: auto; pointer-events: auto; display: grid; gap: 14px; justify-items: start; padding: 0 var(--pad); }
  .crew__copy > * { position: static !important; }
  .crew__title { font-size: clamp(34px, 6.6vw, 66px); line-height: .98; }
  .crew__title span { white-space: normal; }
  .crew__sub { font-size: clamp(15px, 2.1vw, 19px); white-space: normal; }
  .pill--crew { margin-top: 6px; height: clamp(44px, 5.6vw, 52px); padding: 0 clamp(22px, 3.2vw, 30px); gap: 14px; font-size: clamp(14px, 1.9vw, 17px); }
  .pill--crew svg { width: 20px; stroke-width: 1.6px; }
  .crew__script { position: static; width: clamp(160px, 24vw, 260px); justify-self: end; margin: -10px var(--pad) 0 0; }
  /* the cards keep their row: a strip that scrolls sideways when it must */
  .crew__cards { position: static; inset: auto; pointer-events: auto; display: flex; gap: 12px; padding: 6px var(--pad) 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--pad); scrollbar-width: thin; }
  .tcard { position: relative; left: auto; top: auto; flex: none; width: clamp(150px, 19vw, 195px); height: auto; aspect-ratio: 195 / 430; scroll-snap-align: start; }
  .tcard__plate { left: 13%; right: 9%; width: auto; top: auto; bottom: 11%; height: auto; padding: 8px 8px 8px 11px; border-radius: 11px; }
  .tcard__who b { font-size: clamp(11px, 1.5vw, 14px); line-height: 1.15; white-space: normal; }
  .tcard__who--long b { font-size: clamp(10px, 1.3vw, 12.5px); }
  .tcard__who > span { margin-top: 3px; font-size: clamp(9.5px, 1.2vw, 12px); line-height: 1.2; white-space: normal; }
  .crew__foot { position: static; height: auto; margin: 0 var(--pad); padding-top: 22px; border-top: 1px solid #e6e6ea; flex-wrap: wrap; gap: 16px 24px; }
  .crew__foot .t-foot__line { position: static; translate: none; order: 3; width: 100%; gap: 18px; font-size: clamp(9px, 1.2vw, 11px); }
  .crew__foot .t-foot__line i { flex: 1; width: auto; }
}
@media (max-width: 720px) {
  .heads__stats li { padding-right: 16px; margin-right: 16px; }
  .heads__stats li:not(:first-child)::before { left: -16px; }
  .tcard { width: clamp(150px, 42vw, 180px); }
}