/* Photo heroes: a rounded card with one crisp photo, a green wash behind the words and one obvious thing to play with */
.ph-wrap{background:#fff;padding:clamp(10px,1.6vw,22px) clamp(10px,2.2vw,32px) 0}
.ph{position:relative;isolation:isolate;overflow:hidden;border-radius:clamp(22px,2.6vw,38px);min-height:min(calc(100svh - 110px),820px);background:#0f3220;color:#fff;display:grid;align-items:center;touch-action:pan-y}
.ph-photo{position:absolute;inset:0;z-index:0}
.ph-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,75% 50%);display:block}
.ph canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ph .cover{z-index:1;cursor:grab}
.ph .bits{z-index:3;pointer-events:none}
.ph-wash{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,#0f3220f2 0%,#0f3220d9 30%,#0f322066 50%,#0f322000 62%)}
.ph-glow{position:absolute;z-index:2;pointer-events:none;border-radius:50%;filter:blur(2px);mix-blend-mode:screen;animation:float var(--d,18s) ease-in-out var(--w,0s) infinite alternate}
.ph-glow.a{width:min(30vw,420px);aspect-ratio:1;left:-6%;top:-14%;background:radial-gradient(circle at 35% 35%,#fde4ec55,#e5215c22 45%,transparent 70%)}
.ph-glow.b{width:min(18vw,240px);aspect-ratio:1;left:30%;bottom:-8%;background:radial-gradient(circle at 35% 35%,#ffffff40,#fde4ec18 45%,transparent 70%);--d:22s;--w:-6s}
.ph-glow.c{width:min(10vw,140px);aspect-ratio:1;left:44%;top:12%;background:radial-gradient(circle at 35% 35%,#ffffff55,#e5215c1a 50%,transparent 72%);--d:15s;--w:-3s}
@keyframes float{to{transform:translate(28px,-34px) scale(1.06)}}

.ph-copy{position:relative;z-index:4;padding:clamp(40px,6vw,96px) clamp(26px,6vw,96px);max-width:min(640px,56%);pointer-events:none}
.ph-copy .loc{display:flex;align-items:center;gap:10px;font:600 1rem/1.3 var(--sans);text-transform:none;letter-spacing:0;color:#fff;margin:0 0 22px}
.ph-copy .loc:before{content:'';width:12px;height:12px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 5px #e5215c40}
.ph-copy .slogan{font:400 clamp(3.4rem,7vw,7.4rem)/.88 var(--display);text-transform:uppercase;margin:0 0 24px;letter-spacing:.004em;color:#fff}
.ph-copy .slogan span{display:block}
.ph-copy .slogan .tape{width:fit-content;background:var(--pink);padding:.03em .12em 0;margin-left:-.06em;transform:rotate(-1.5deg)}
.ph-copy p:not(.slogan){font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.55;color:#e4eee8;margin:0 0 30px;max-width:40ch}
.ph-copy .ctas{display:flex;flex-wrap:wrap;gap:12px;pointer-events:auto}
.ph-copy .btn.ghost{background:#ffffff14;color:#fff;box-shadow:inset 0 0 0 1.5px #ffffff80;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ph-ticks{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;padding:0;margin:30px 0 0;font-weight:500;color:#e4eee8}
.ph-ticks li{display:flex;align-items:center;gap:9px}
.ph-ticks li:before{content:'';width:20px;height:20px;border-radius:50%;background:var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

.ph-pill{position:absolute;z-index:5;right:clamp(16px,2.4vw,34px);bottom:clamp(16px,2.4vw,34px);display:flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;border:0;border-radius:999px;background:#0f3220cc;color:#fff;font:600 1rem var(--sans);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 30px -14px #000a}
.ph-pill i{width:34px;height:34px;border-radius:50%;background:var(--pink);display:grid;place-items:center;animation:nudge 1.6s ease-in-out infinite}
.ph-pill i svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.played .ph-pill i{animation:none}
@keyframes nudge{50%{transform:translateX(-4px)}}

@media(max-width:820px){
 .ph{min-height:0;display:block}
 .ph-photo{top:auto;height:min(58vh,460px)}
 .ph-photo img{object-position:var(--mpos,80% 50%)}
 .ph-wash{background:linear-gradient(180deg,#0f3220 0%,#0f3220 calc(100% - min(58vh,460px)),#0f322000 calc(100% - min(58vh,460px) + 90px))}
 .ph-copy{max-width:none;padding:34px 24px calc(min(58vh,460px) + 10px)}
 .ph-copy .slogan{font-size:clamp(3rem,15vw,4.6rem)}
 .ph-copy p{margin-bottom:22px}
 .ph-ticks{display:none}
}
@media(prefers-reduced-motion:reduce){.ph-glow,.ph-pill i{animation:none}}