/* ============================================================
   Padel54 corporate and team events
   Loaded after style.css and alma.css. The idea: the meeting is
   upstairs, the match is downstairs, and the page keeps moving
   between the two.
   ============================================================ */

.kick2{display:block;font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--signal);margin-bottom:16px}
.sec-light .kick2{color:#0c0d0f}
.corp-day h2,.corp-floor h2,.corp-proof h2,.corp-who h2{font-weight:900;text-transform:uppercase;font-size:clamp(30px,4.4vw,64px);line-height:.94;letter-spacing:-.028em}

/* ---------- hero: group photo, kept low so faces sit above the heading ---------- */
.corp-hero .bg img{object-position:50% 100%}
.corp-hero .cap h1 span{display:inline-block}
@media(min-width:861px){
  .corp-hero .cap h1{font-size:clamp(34px,4.2vw,62px);max-width:none}
  .corp-hero .bg::after{background:linear-gradient(180deg,rgba(12,13,15,.72) 0,rgba(12,13,15,.5) 9%,rgba(12,13,15,.05) 24%,rgba(12,13,15,.85) 100%)}
}
@media(max-width:860px){
  .corp-hero{height:auto;background:var(--ink)}
  .corp-hero .cap h1{font-size:min(8.5vw,64px);max-width:none;line-height:.94}
  .corp-hero .cap h1 span{display:block}
  .corp-hero .bg{position:relative;inset:auto;aspect-ratio:4/3}
  .corp-hero .bg::after{background:linear-gradient(180deg,rgba(12,13,15,.35),rgba(12,13,15,0) 28%)}
  .corp-hero .bg img{top:0;height:100%;transform:none!important}
  .corp-hero .cap{position:static;padding:clamp(28px,5vw,40px) var(--mx) clamp(36px,5vw,48px)}
}

/* ---------- the numbers ---------- */
.corp-nums{background:var(--ink);padding-bottom:clamp(40px,5vw,72px)}
.corp-nums ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.corp-nums li{padding:clamp(18px,2vw,28px) clamp(14px,2vw,28px) 0 0}
.corp-nums li+li{padding-left:clamp(14px,2vw,28px);border-left:1px solid var(--line)}
.corp-nums b{display:block;font-weight:900;font-size:clamp(68px,10.5vw,168px);line-height:.86;letter-spacing:-.045em;color:var(--signal);font-variant-numeric:tabular-nums}
.corp-nums span{display:block;margin-top:clamp(12px,1.4vw,20px);max-width:22ch;font-size:clamp(13px,1.1vw,15.5px);line-height:1.35;color:var(--paper-dim)}
@media(max-width:760px){
  .corp-nums ul{grid-template-columns:1fr 1fr}
  .corp-nums li{padding:18px 14px 22px 0}
  .corp-nums li:nth-child(odd){padding-left:0;border-left:0}
  .corp-nums li:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ---------- the day ---------- */
.corp-day{background:var(--ink-2);padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(56px,7vw,110px)}
.day-head{max-width:760px}
.day-head p{margin-top:16px;max-width:46ch;font-size:15.5px;color:var(--paper-dim)}
.step-meta{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--paper-dim)}
.step-meta b{font-weight:800;letter-spacing:.04em;font-size:15px;color:var(--signal);font-variant-numeric:tabular-nums}
.step h3{margin-top:12px;font-weight:900;text-transform:uppercase;letter-spacing:-.022em;line-height:.98}
.step p{margin-top:10px;color:var(--paper-dim)}
.day-stage{display:none}
.day-steps{list-style:none}

/* phones and tablets: swipe through the day */
@media(max-width:960px){
  .day-steps{display:flex;gap:12px;margin:clamp(28px,5vw,40px) calc(var(--mx) * -1) 0;padding:0 var(--mx) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--mx);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .day-steps::-webkit-scrollbar{display:none}
  .step{flex:0 0 min(78vw,340px);scroll-snap-align:start}
  .step-ph{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--ink-3)}
  .step-tx{padding-top:16px}
  .step h3{font-size:25px}
  .step p{font-size:14.5px}
}

/* desktop: the photo stays pinned while the steps scroll past */
@media(min-width:961px){
  .js .step-ph{display:none}
  html:not(.js) .step-ph{margin:0 0 20px;aspect-ratio:4/5;overflow:hidden;max-width:420px}
  .day-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);margin-top:clamp(24px,3vw,48px)}
  .js .day-stage{display:flex;gap:18px;position:sticky;top:0;height:100vh;height:100svh;padding:clamp(76px,9vh,96px) 0 clamp(20px,4vh,40px);align-self:start}
  .stage-frame{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:2px;background:var(--ink-3)}
  .stage-imgs img{position:absolute;inset:0;opacity:0;transform:scale(1.05);transition:opacity .7s var(--ease),transform 1.4s var(--ease)}
  .stage-imgs img.on{opacity:1;transform:none}
  .stage-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,13,15,.62),rgba(12,13,15,0) 38%);pointer-events:none}
  .stage-time{position:absolute;z-index:2;left:clamp(16px,2vw,28px);bottom:clamp(8px,1.2vw,18px);font-weight:900;font-size:clamp(64px,8vw,132px);line-height:1;letter-spacing:-.045em;color:var(--paper);font-variant-numeric:tabular-nums}
  .stage-rail{position:relative;flex:none;width:18px;writing-mode:vertical-rl;display:flex;justify-content:space-between;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:rgba(244,243,240,.3)}
  .stage-rail::before{content:"";position:absolute;left:50%;top:92px;bottom:112px;border-left:1px solid var(--line)}
  .stage-rail i{position:absolute;left:50%;top:92px;width:11px;height:11px;margin:-5px 0 0 -5.5px;border-radius:50%;background:var(--signal);transition:top .9s var(--ease)}
  .stage-rail[data-floor="downstairs"] i{top:calc(100% - 112px)}
  .stage-rail span{transition:color .4s}
  .stage-rail[data-floor="upstairs"] .r-up,.stage-rail[data-floor="downstairs"] .r-down{color:var(--signal)}
  .step{min-height:62vh;display:flex;align-items:center;opacity:.22;transition:opacity .5s var(--ease)}
  html:not(.js) .step,.step.on{opacity:1}
  .step h3{font-size:clamp(34px,4vw,62px)}
  .step p{font-size:16.5px;max-width:40ch}
  .day-steps{padding-bottom:18vh}
  .step:last-child{min-height:50vh}
}

/* ---------- upstairs and downstairs ---------- */
.corp-floor{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(64px,8vw,120px)}
.corp-down{background:var(--ink)}
.fl-photo{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:var(--ink-3)}
.fl-photo img{position:absolute;inset:0}
.fl-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,13,15,.5),rgba(12,13,15,0) 42%);pointer-events:none}
.fl-word{position:absolute;z-index:2;left:0;right:0;bottom:-.075em;overflow:hidden;padding:0 .04em;font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.86;color:var(--paper);text-align:center;white-space:nowrap;font-size:min(16.6vw,246px)}
.corp-down .fl-word{font-size:min(13.4vw,198px)}
.fl-word span{display:block;transform:translateY(102%);transition:transform 1.2s var(--ease) .15s}
.fl-photo.in .fl-word span{transform:none}
.fl-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);margin-top:clamp(40px,5vw,72px);align-items:start}
.fl-split{align-items:center}
@media(max-width:860px){.fl-grid{grid-template-columns:1fr}}
.fl-grid p{margin-top:16px;max-width:50ch;font-size:15.5px;color:var(--paper-dim)}
.sec-light .fl-grid p{color:#6c6b65}
.fl-grid .cta{margin-top:clamp(22px,2.6vw,32px);display:flex;gap:14px;flex-wrap:wrap}
.points{display:grid;gap:20px}
.fl-split .points{margin-top:clamp(26px,3vw,38px)}
.pt{display:flex;gap:14px;align-items:flex-start}
.pt .ic{flex:none;width:34px;height:34px;border-radius:50%;background:var(--btn-lime);display:flex;align-items:center;justify-content:center;margin-top:2px}
.sec-light .pt .ic{background:var(--ink)}
.sec-light .pt .ic svg path{stroke:var(--btn-lime)}
.pt .ic svg{width:16px;height:16px}
.pt h3{font-weight:800;text-transform:uppercase;font-size:14.5px;letter-spacing:.01em}
.fl-grid .pt p{margin-top:5px;font-size:13.5px;max-width:38ch}

/* food and drink: a wide shot and two close-ups */
.corp-food{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(10px,1.4vw,20px);margin-top:clamp(44px,6vw,84px)}
.corp-food figure{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:#e6e5e0}
.corp-food figure.corp-wide{aspect-ratio:auto}
.corp-food img{position:absolute;inset:0}
@media(max-width:640px){
  .corp-food{grid-template-columns:1fr 1fr}
  .corp-food figure.corp-wide{grid-column:1/-1;aspect-ratio:16/10}
}

/* ---------- proof: the international circuit and the brands on our courts ---------- */
.corp-proof{background:var(--ink-2);padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(64px,8vw,120px)}
.proof-head{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,80px);align-items:end}
.proof-head p{max-width:44ch;font-size:15.5px;color:var(--paper-dim)}
.proof-logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:24px}
.proof-logos img{width:auto;height:34px;object-fit:contain;opacity:.92}
.proof-logos .epl{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;line-height:1.1;text-transform:uppercase;letter-spacing:.06em;color:var(--paper)}
.proof-logos .epl img{height:26px}
.proof-films{display:grid;grid-template-columns:1.778fr .561fr .561fr;gap:clamp(10px,1.4vw,20px);margin-top:clamp(32px,4vw,56px)}
.cf{margin:0}
.film-modal.tall video{width:min(94vw,calc(88svh * 404 / 720));height:auto}
.cf-v{position:relative;aspect-ratio:404/720;overflow:hidden;border-radius:2px;background:var(--ink)}
.cf-wide .cf-v{aspect-ratio:16/9}
.cf-v video{display:block;width:100%;height:100%;object-fit:cover}
.cf-v::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,13,15,.55),rgba(12,13,15,0) 34%);pointer-events:none}
.cf .film-play{left:clamp(8px,1vw,14px);bottom:clamp(8px,1vw,14px);z-index:2;gap:10px;padding:5px 14px 5px 5px}
.cf .film-play .disc{width:34px;height:34px}
.cf .film-play .disc svg{width:12px}
.cf .film-play .dur{padding-left:10px}
.cf figcaption{margin-top:10px;font-size:12.5px;line-height:1.4;color:var(--paper-dim)}
.cf figcaption b{display:block;font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:13px;color:var(--paper)}
@media(max-width:860px){
  .proof-head{grid-template-columns:1fr}
  .proof-films{grid-template-columns:1fr 1fr}
  .cf-wide{grid-column:1/-1}
}
@media(max-width:480px){
  .cf .film-play{gap:8px;padding:4px 12px 4px 4px;font-size:10px}
  .cf .film-play .disc{width:28px;height:28px}
  .cf .film-play .dur{display:none}
}
.proof-brands{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);margin-top:clamp(52px,7vw,100px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line);align-items:start}
@media(max-width:860px){.proof-brands{grid-template-columns:1fr}}
.pb-tx h3{font-weight:900;text-transform:uppercase;font-size:clamp(24px,2.6vw,38px);letter-spacing:-.022em;line-height:1}
.pb-tx p{margin-top:12px;max-width:34ch;font-size:15px;color:var(--paper-dim)}
.pb-tx a{color:var(--paper);border-bottom:1px solid var(--signal)}
.proof-brands ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.proof-brands li{background:var(--ink-2);display:flex;align-items:center;justify-content:center;height:clamp(70px,7vw,104px);padding:clamp(14px,2vw,26px)}
.proof-brands li img{width:100%;height:100%;object-fit:contain;opacity:.86}

/* ---------- who it's for ---------- */
.corp-who{padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(64px,8vw,120px)}
.who-rows{margin-top:clamp(28px,4vw,52px);border-bottom:1px solid rgba(12,13,15,.16)}
.who-row{position:relative;display:grid;grid-template-columns:44px 1.15fr 1fr 48px;gap:clamp(12px,2vw,28px);align-items:center;padding:clamp(18px,2.2vw,30px) 0;border-top:1px solid rgba(12,13,15,.16);color:var(--ink);transition:padding .5s var(--ease),background .35s}
.who-row .n{font-weight:600;font-size:11px;letter-spacing:.2em;color:#6c6b65;font-variant-numeric:tabular-nums}
.who-row h3{font-weight:900;text-transform:uppercase;font-size:clamp(22px,2.9vw,44px);letter-spacing:-.024em;line-height:1}
.who-row p{font-size:15px;color:#6c6b65;max-width:46ch}
.who-arrow{justify-self:end;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--btn-lime);transition:transform .5s var(--ease)}
.who-arrow svg{width:13px;height:13px}
@media(hover:hover){
  .who-row:hover{background:var(--btn-lime);padding-left:clamp(12px,1.4vw,22px);padding-right:clamp(12px,1.4vw,22px)}
  .who-row:hover p,.who-row:hover .n{color:var(--ink)}
  .who-row:hover .who-arrow{transform:rotate(45deg)}
}
.who-row:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:760px){
  .who-row{grid-template-columns:1fr 40px;gap:8px 14px}
  .who-row .n{display:none}
  .who-row h3{grid-column:1;grid-row:1}
  .who-row p{grid-column:1;grid-row:2;font-size:14px}
  .who-arrow{grid-column:2;grid-row:1/3}
}

/* ---------- how it works: three numbered steps ---------- */
.corp-steps{padding-top:clamp(70px,9vw,130px);padding-bottom:clamp(70px,9vw,130px);background:var(--ink-2)}
.corp-steps .head{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,90px);align-items:end}
@media(max-width:860px){.corp-steps .head{grid-template-columns:1fr;gap:18px}}
.corp-steps .kick2{display:block;font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--signal);margin-bottom:16px}
.corp-steps h2{font-weight:900;text-transform:uppercase;font-size:clamp(28px,4vw,50px);line-height:.96;letter-spacing:-.025em}
.corp-steps .head p{max-width:46ch;font-size:15.5px;color:var(--paper-dim)}
.corp-steps ol{list-style:none;margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.corp-steps li{padding:clamp(24px,2.6vw,34px) clamp(18px,2.2vw,30px) 6px 0}
.corp-steps li+li{padding-left:clamp(18px,2.2vw,30px);border-left:1px solid var(--line)}
.corp-steps .n{display:block;font-weight:600;letter-spacing:.2em;font-size:11px;color:var(--signal);font-variant-numeric:tabular-nums}
.corp-steps h3{margin-top:14px;font-weight:800;text-transform:uppercase;font-size:clamp(17px,1.6vw,21px);letter-spacing:.005em}
.corp-steps li p{margin-top:10px;font-size:14px;color:var(--paper-dim);max-width:34ch}
@media(max-width:760px){
  .corp-steps ol{grid-template-columns:1fr}
  .corp-steps li,.corp-steps li+li{padding:22px 0;border-left:0}
  .corp-steps li+li{border-top:1px solid var(--line)}
}

/* ---------- full-width group photo ---------- */
.corp-photo{margin:0 0 clamp(44px,6vw,84px);aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:var(--ink-2)}
.corp-photo img{width:100%;height:100%;object-fit:cover;display:block}

@media(prefers-reduced-motion:reduce){
  .fl-word span{transform:none;transition:none}
  .stage-imgs img,.stage-rail i,.step,.who-row,.who-arrow{transition:none}
  .stage-imgs img{transform:none}
}