/* About Us v2: the Sponsorship page's system applied here (sheets with the brand seam, page index, word reveals, full-screen snap),
   "Why boutique" as three glass cards with their own icons, and a track record compact enough to fit one screen. */
.how h2,.signed .pt{font-size:clamp(32px,4vw,58px);line-height:1.04;letter-spacing:-.035em;font-weight:800}

/* Why boutique: three glass cards, icon, short heading and a line, centred like the cards on Sponsorship */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);margin-top:clamp(22px,3vh,40px)}
.pr.gx{border-radius:26px}
.pr .in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:clamp(210px,30vh,280px);padding:clamp(22px,3vh,34px) clamp(20px,2vw,30px);box-sizing:border-box}
.pr h3{margin-top:clamp(14px,2vh,22px);font-size:clamp(19px,1.7vw,24px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.pr p{margin-top:10px;max-width:30ch;font-size:15px;line-height:1.55;color:rgba(222,224,230,.8)}
/* the page's one emblem recipe (as on Sponsorship): light straight from above, a solid fill, an even rim */
.pr .emblem{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,#8a1628,#4a0b16 55%,#2a060d);border:1px solid rgba(255,255,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 26px rgba(226,50,62,.4)}
.pr .emblem .ico{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pr.gx{background:radial-gradient(110% 60% at 25% -20%,rgba(255,255,255,.13),rgba(255,255,255,.03) 50%,transparent 70%),linear-gradient(180deg,rgba(14,6,8,.22),rgba(14,6,8,.42) 60%,rgba(163,21,42,.34))}
@media (max-width:900px){.g3{grid-template-columns:1fr}.pr .in{min-height:0}}

/* full-screen snap: the track record (crests and three talent photos) has to fit one screen, so the photos take their height from the window */
@media (min-width:1024px) and (min-height:700px){
  html.snap .signed .marq .it{font-size:clamp(28px,min(4vw,5.4vh),60px);padding:clamp(14px,2.2vh,30px) clamp(16px,2vw,32px)}
  html.snap .signed .amb{margin-top:clamp(10px,1.8vh,24px)}
  html.snap .signed .tal{aspect-ratio:4/5;height:clamp(220px,38vh,380px);width:auto}
  html.snap .signed .grp{margin-top:clamp(8px,1.6vh,20px)}
  html.snap .signed .lnk{margin-top:clamp(10px,1.8vh,20px)}
  html.snap .how,html.snap .signed{padding-bottom:clamp(24px,4vh,48px)}
}


/* How we work, moved from Sponsorship: the section heading and lead as they were there */
#process.sec{padding:clamp(72px,9vw,128px) 0 0}
#process h2{font-size:clamp(32px,4vw,58px);line-height:1.04;letter-spacing:-.035em;font-weight:800;margin-top:14px;max-width:900px;text-wrap:balance}
#process .lead{margin-top:16px;font-size:clamp(16px,1.3vw,18px);color:var(--body);max-width:640px}
#process .lead b{color:#fff;font-weight:600}

/* talent photos framed as they were shot (portrait 4:5), names only; the three cards sit centred */
.signed .amb{grid-template-columns:repeat(3,auto);justify-content:center}
.signed .tal{aspect-ratio:4/5;width:clamp(220px,24vw,320px)}
html.snap .signed .tal{width:auto}
.signed .tal img{object-position:50% 20%!important}
.signed .tal .cap b{font-size:clamp(20px,1.9vw,28px)}
@media (max-width:900px){.signed .amb{grid-template-columns:repeat(3,72%);justify-content:start}.signed .tal{width:auto}}

/* club strip: only the logo under the cursor grows (no neighbour lift), and it has room to grow without being cut at the top and bottom
   (the strip's fade mask clips at its own box, so the box gets extra height that the negative margin gives back) */
.signed .marq .mag:has(+ .mag:hover),.signed .marq .mag:hover + .mag{transform:none}
.signed .marq{padding-block:clamp(22px,3vh,34px);margin-block:calc(clamp(22px,3vh,34px) * -1 + 6px) calc(clamp(22px,3vh,34px) * -1)}
.signed .marq .mag:hover{transform:scale(1.32)}

/* Our vision: the brand line is the heading, centred; each card carries one part of it as a gradient label */
#vision h2.slogan{text-align:center;max-width:none;font-size:clamp(30px,min(3.8vw,6vh),56px);text-wrap:balance}
#vision .pr .kk{display:block;margin-top:clamp(12px,1.8vh,18px);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:transparent;
  background:var(--flow) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;animation:flow 7s linear infinite}
#vision .pr .kk + h3{margin-top:6px}
@media (prefers-reduced-motion:reduce){#vision .pr .kk{animation:none}}
/* Our vision, final: a quiet centred heading; the brand line is split across the three glass cards, one part each, key word in the brand gradient */
#vision h2.vh{text-align:left;max-width:none}
#vision .pr h3{font-size:clamp(19px,1.75vw,26px);letter-spacing:-.03em;white-space:nowrap}
/* Our vision fills its screen: taller cards with a larger emblem and text, so there is no empty band above and below */
#vision .g3{margin-top:clamp(24px,4vh,48px)}
#vision .pr .in{min-height:clamp(300px,52vh,500px);justify-content:center;padding:clamp(28px,4.4vh,48px) clamp(22px,2.2vw,34px)}
#vision .pr .emblem{width:clamp(60px,8vh,76px);height:clamp(60px,8vh,76px)}
#vision .pr .emblem .ico{width:46%;height:46%}
#vision .pr h3{margin-top:clamp(18px,3vh,30px);font-size:clamp(20px,1.9vw,28px)}
#vision .pr p{margin-top:clamp(10px,1.6vh,16px);font-size:clamp(15px,1.15vw,17px);line-height:1.6;max-width:28ch}