/* Team page, "Backstage Pass": polaroids, a running ticker, ticket stubs, and the leadership hung from a lanyard as event passes.
   Ink, gold and red on ivory. Only loaded by team.php (body class team-page). Motion comes from page-motion.css / page-motion.js. */

.team-page{background:#F5F4F1}
.tm{--ink:#14110F; --soft:#5E5558; --mut:#8C8285; --ln:#E4E1DC; --red:#B91C1C; --redb:#DC2626; --gold:#F5A81C; --ivory:#F5F4F1; --tint:#FBE9E9;
  --ease:cubic-bezier(.22,.8,.24,1); --expo:cubic-bezier(.16,1,.3,1);
  --f-display:'Outfit','Plus Jakarta Sans',sans-serif; --f-mono:'JetBrains Mono',ui-monospace,monospace;
  color:var(--ink); font-family:'Plus Jakarta Sans',system-ui,sans-serif; overflow-x:clip}
.tm *{box-sizing:border-box}
.tm h1,.tm h2,.tm h3{font-family:var(--f-display); margin:0; text-wrap:balance}
.tm p,.tm ul{margin:0}
.tm a:focus-visible,.tm button:focus-visible{outline:3px solid var(--redb); outline-offset:3px}
.tm figure{margin:0}
.tm-i{flex:none; width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.tm-pbar{position:fixed; top:0; left:0; right:0; z-index:70; height:4px; pointer-events:none}
.tm-pbar i{display:block; height:100%; background:linear-gradient(90deg,var(--gold,#F5A81C),#DC2626); transform-origin:left; transform:scaleX(var(--pp,0))}
.tm-wrap{width:min(1120px,100% - 64px); margin-inline:auto}
.tm-kick{font:600 .66rem var(--f-mono); letter-spacing:.24em; text-transform:uppercase; color:var(--red)}
.tm-rule{height:2px; width:64px; background:var(--gold); margin:22px 0}
.tm-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; border-radius:14px; border:1.5px solid transparent; font-weight:800; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; transition:background .25s,color .25s,box-shadow .4s var(--ease),transform .3s var(--ease)}
.tm-btn.red{background:#DC2626; color:#fff}
.tm-btn.red:hover{background:#B91C1C; color:#fff; box-shadow:0 20px 30px -18px rgba(220,38,38,.8)}
.tm-btn.gold{background:var(--gold); color:#14110F}
.tm-btn.gold:hover{background:#FBBF24; color:#14110F; box-shadow:0 20px 30px -18px rgba(245,168,28,.8)}
.tm-btn .tm-i{transition:transform .35s var(--ease)}
.tm-btn:hover .tm-i{transform:translateX(5px)}
.tm-sign{margin-top:54px; display:grid; gap:6px; justify-items:center}
.tm-sign b{font:700 .9rem var(--f-mono); letter-spacing:.34em}
.tm-sign span{font:600 .74rem var(--f-mono); letter-spacing:.22em; text-transform:uppercase; color:var(--gold)}
.tm-sign em{font-style:normal; font-size:.92rem; opacity:.8}

/* hero */
.tm-hero{position:relative; padding:76px 0 90px; overflow:hidden}
.tm-hero-in{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:50px; align-items:center}
.tm-hero h1{margin:20px 0 24px; font-weight:800; font-size:clamp(2.5rem,5.6vw,4.8rem); line-height:.96; letter-spacing:-.055em; color:var(--ink)}
.tm-hero h1 .pm-w:nth-child(2){color:var(--redb)}
.tm-lede{font-size:1.15rem; line-height:1.65; color:var(--soft); max-width:44ch}
.tm-pol{position:relative; height:520px}
.tm-pol figure{position:absolute; padding:10px 10px 38px; background:#fff; border-radius:8px; box-shadow:0 40px 60px -34px rgba(20,17,15,.6),0 0 0 1px var(--ln); transition:transform .6s var(--ease)}
.tm-pol figure img{display:block; width:100%; height:100%; object-fit:cover; border-radius:3px}
.tm-pol figure span{position:absolute; left:0; right:0; bottom:11px; text-align:center; font:600 .6rem var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--mut)}
.tm-p1{left:2%; top:40px; width:50%; height:300px; transform:rotate(-6deg)}
.tm-p2{right:0; top:0; width:44%; height:250px; transform:rotate(5deg)}
.tm-p3{right:8%; bottom:0; width:48%; height:260px; transform:rotate(-2deg)}
.tm-pol figure:hover{transform:rotate(0) scale(1.05); z-index:3}
.tm-tk{background:var(--ink); color:#fff; padding:18px 0; font:700 .9rem var(--f-mono); letter-spacing:.2em; text-transform:uppercase}
.tm-tk span{padding:0 28px; display:inline-flex; align-items:center; gap:56px}
.tm-tk span::after{content:""; width:9px; height:9px; border-radius:50%; background:var(--gold)}

/* sections */
.tm-sec{padding:100px 0}
.tm h2{font-weight:800; font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.02; letter-spacing:-.04em}
.tm-intro-in{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:70px; align-items:start}
.tm-big{font:300 clamp(1.8rem,3.3vw,2.7rem)/1.22 var(--f-display); letter-spacing:-.03em}
.tm-big b{font-weight:700; color:var(--red)}
.tm-prose{color:var(--soft); font-size:1.06rem; line-height:1.8; padding-top:12px}
.tm-pvc{background:#fff; border-block:1px solid var(--ln)}
.tm-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:end; margin-bottom:46px}
.tm-p{color:var(--soft); font-size:1.04rem; line-height:1.75}
.tm-stubs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.tm-stub{position:relative; height:100%; padding:30px 24px 26px; border-radius:20px; background:var(--ivory); border:1px solid var(--ln); display:grid; gap:22px; align-content:start; transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tm-stub:hover{transform:translateY(-8px) rotate(-1deg); box-shadow:0 34px 44px -30px rgba(20,17,15,.5)}
.tm-stub::before,.tm-stub::after{content:""; position:absolute; top:62%; width:22px; height:22px; border-radius:50%; background:#fff; border:1px solid var(--ln)}
.tm-stub::before{left:-12px}.tm-stub::after{right:-12px}
.tm-stub .ic{display:grid; place-items:center; width:58px; height:58px; border-radius:18px; background:var(--tint); color:var(--red); font-size:1.7rem}
.tm-stub h3{padding-top:22px; border-top:2px dashed var(--ln); font:700 1.3rem/1.15 var(--f-display); letter-spacing:-.02em}
/* the statement is a red ticket: the lead-in on the main part, the goal on the tear-off stub */
.tm-rtk{position:relative; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); margin-top:48px; border-radius:28px; color:#fff; background:linear-gradient(120deg,#7F1D1D,#B91C1C 55%,#DC2626); box-shadow:0 60px 80px -50px rgba(127,29,29,.8)}
.tm-rtk::before{content:""; position:absolute; inset:0; border-radius:28px; background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 22px); pointer-events:none}
.tm-notch{position:absolute; left:60%; width:38px; height:38px; margin-left:-19px; border-radius:50%; background:#fff}
.tm-notch.t{top:-19px}
.tm-notch.b{bottom:-19px}
.tm-rmain{position:relative; padding:60px}
.tm-rmain p{max-width:34ch; font:300 clamp(1.4rem,2.5vw,2.1rem)/1.45 var(--f-display); letter-spacing:-.02em; color:#FFE3E3}
.tm-rstub{position:relative; display:flex; align-items:center; padding:48px 44px; border-left:2.5px dashed rgba(255,255,255,.55)}
.tm-goal{font:800 clamp(2.1rem,4.4vw,3.8rem)/1 var(--f-display); letter-spacing:-.05em; color:var(--gold)}

/* leadership: the three people as portrait cards, the two teams as a dark strip below */
.tm-people{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.tm-pcard{background:#fff; border-radius:26px; overflow:hidden; border:1px solid var(--ln); box-shadow:0 40px 50px -40px rgba(20,17,15,.4)}
.tm-pph{position:relative; aspect-ratio:4/4.5; overflow:hidden; background:#2A1F22}
.tm-pph img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 16%; transition:transform 1.3s var(--ease)}
.tm-pcard:hover .tm-pph img{transform:scale(1.05)}
.tm-pph .r{position:absolute; left:16px; bottom:16px; padding:8px 13px; border-radius:99px; background:rgba(255,255,255,.93); font:700 .6rem var(--f-mono); letter-spacing:.14em; text-transform:uppercase}
.tm-pbd{padding:26px 26px 22px}
.tm-pbd h3{font:800 1.75rem/1.05 var(--f-display); letter-spacing:-.045em}
.tm-pbd .t{display:block; margin:6px 0 12px; font:600 .95rem var(--f-display); color:var(--soft)}
.tm-pbd h3+p{margin-top:12px}
.tm-pbd p,.tm-dept p{font-size:.92rem; line-height:1.65; color:var(--soft)}
.tm-pbd p:not(.tm-foot){margin-top:12px}
.tm-pbd .tm-foot,.tm-dept .tm-foot{margin-top:20px}
.tm-foot{margin-top:14px; font:600 .54rem var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--mut)}
.tm-depts{margin-top:22px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}
.tm-dept{display:grid; grid-template-columns:62px minmax(0,1fr); gap:22px; padding:32px; border-radius:26px; background:var(--ink); color:#fff}
.tm-dept .ico{display:grid; place-items:center; width:62px; height:62px; border-radius:18px; background:rgba(245,168,28,.14); color:var(--gold); font-size:1.7rem}
.tm-dept small{display:block; font:700 .62rem var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.tm-dept h3{margin-top:6px; font:700 1.35rem/1.15 var(--f-display); letter-spacing:-.025em}
.tm-dept p{margin-top:10px; color:#CFC4C7}
.tm-dept .tm-foot{color:#8C8285}
/* what drives us */
.tm-drive{background:#fff; border-block:1px solid var(--ln)}
.tm-vals{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:46px}
.tm-vl{padding:6px 30px; border-left:2px dashed var(--ln)}
.tm-vl:first-child{border-left:0; padding-left:0}
.tm-vl .ic{display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--ink); color:var(--gold); font-size:1.8rem}
.tm-vl h3{margin-top:22px; font:700 1.3rem/1.15 var(--f-display); letter-spacing:-.02em}
.tm-vl p{margin-top:10px; color:var(--soft); line-height:1.65; font-size:.94rem}

/* future */
.tm-future{position:relative; padding:0 0 110px}
.tm-fph{position:relative; height:420px; overflow:hidden; background:#2A1F22}
.tm-fph img{position:absolute; left:0; top:-14%; display:block; width:100%; height:128%; object-fit:cover}
.tm-fc{position:relative; margin:-150px auto 0; max-width:780px; padding:46px 54px; border-radius:26px; background:#F5F1EA; box-shadow:0 50px 70px -40px rgba(20,17,15,.7)}
.tm-fc::before,.tm-fc::after{content:""; position:absolute; top:50%; width:34px; height:34px; margin-top:-17px; border-radius:50%; background:#F5F4F1}
.tm-fc::before{left:-17px}.tm-fc::after{right:-17px}
.tm-fc h2{font-size:clamp(1.9rem,3.8vw,3rem)}
.tm-fc p{margin-top:16px; color:var(--soft); line-height:1.75; font-size:1.04rem}
.tm-fc p+p{color:var(--ink); font-weight:700}

/* call to action */
.tm-cta{position:relative; isolation:isolate; overflow:hidden; background:var(--ink); color:#fff; padding:100px 0}
.tm-cta::before{content:""; position:absolute; z-index:-1; left:50%; top:-280px; width:780px; height:780px; margin-left:-390px; border-radius:50%; background:radial-gradient(closest-side,rgba(220,38,38,.4),transparent)}
/* the closing is a large admit-one ticket: headline, paragraph and button on the main part, barcode and sign-off on the stub */
.tm-ticket{position:relative; display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,.85fr); background:#F5F1EA; color:var(--ink); border-radius:28px; box-shadow:0 60px 80px -50px rgba(0,0,0,.9)}
.tm-ticket::before,.tm-ticket::after{content:""; position:absolute; left:66%; width:38px; height:38px; margin-left:-19px; border-radius:50%; background:var(--ink)}
.tm-ticket::before{top:-19px}
.tm-ticket::after{bottom:-19px}
.tm-tmain{padding:60px 64px}
.tm-cta h2{max-width:12ch; font-size:clamp(2.2rem,4.6vw,4rem); line-height:.98; letter-spacing:-.05em; color:var(--ink)}
.tm-tmain .tm-rule{width:56px}
.tm-l{max-width:46ch; color:#5E5558; font-size:1.05rem; line-height:1.75}
.tm-tstub{padding:44px 38px; border-left:2.5px dashed var(--ink); display:flex; flex-direction:column; justify-content:space-between; gap:26px}
.tm-barc{height:54px; background:repeating-linear-gradient(90deg,#14110F 0 3px,transparent 3px 7px,#14110F 7px 8px,transparent 8px 13px,#14110F 13px 17px,transparent 17px 19px)}
.tm-tstub .tm-sign{margin:0; justify-items:start}
.tm-tstub .tm-sign span{color:var(--red)}

@media (max-width:900px){
  .tm-wrap{width:calc(100% - 36px)}
  .tm-hero{padding:48px 0 60px} .tm-hero-in,.tm-intro-in,.tm-head{grid-template-columns:minmax(0,1fr); gap:28px}
  .tm-hero h1{font-size:2.6rem} .tm-pol{height:380px} .tm-p1{height:220px} .tm-p2{height:170px} .tm-p3{height:190px}
  .tm-sec{padding:64px 0} .tm-stubs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tm-rtk{grid-template-columns:minmax(0,1fr); margin-top:34px} .tm-notch{display:none} .tm-rmain{padding:34px 26px} .tm-rstub{border-left:0; border-top:2.5px dashed rgba(255,255,255,.55); padding:30px 26px}
  .tm-people,.tm-depts{grid-template-columns:minmax(0,1fr)} .tm-dept{padding:24px; grid-template-columns:52px minmax(0,1fr); gap:16px} .tm-dept .ico{width:52px; height:52px}
  .tm-vals{grid-template-columns:minmax(0,1fr); gap:28px} .tm-vl,.tm-vl:first-child{border-left:0; padding:0}
  .tm-fph{height:260px} .tm-fc{margin-top:-80px; padding:32px 26px} .tm-fc::before,.tm-fc::after{display:none} .tm-future{padding-bottom:64px}
  .tm-cta{padding:64px 0} .tm-btn{padding:14px 20px}
  .tm-ticket{grid-template-columns:minmax(0,1fr)} .tm-ticket::before,.tm-ticket::after{display:none}
  .tm-tmain{padding:36px 26px} .tm-tstub{border-left:0; border-top:2.5px dashed var(--ink); padding:28px 26px}
}
@media (prefers-reduced-motion:reduce){
  .tm *{transition-duration:.01s!important}
}