/* EXPERIENCE PAGE — titles Neulis SemiBold, subheadings Poppins 600, body Poppins 500 */
.experience-page.navigation-only:not(.homepage){padding-top:0;background:var(--brand-black)}
.experience-page main{overflow:clip}
.experience-page h1,.experience-page h2{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:0}
.experience-page p{font-family:var(--font-body);font-weight:500}
.experience-page .section-label{font-weight:600}

.xp-hero{position:relative;margin-top:var(--nav-height);padding-block:clamp(3.5rem,8vw,7rem);background:var(--brand-magenta);color:#fff;overflow:hidden;isolation:isolate}
.xp-hero__blob{position:absolute;border-radius:50%;z-index:-1}
.xp-hero__blob--a{width:34rem;height:34rem;background:var(--brand-purple);top:-14rem;right:-8rem;opacity:.85}
.xp-hero__blob--b{width:22rem;height:22rem;background:var(--brand-cream);bottom:-10rem;left:-6rem;opacity:.25}
.xp-hero__layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.xp-hero .section-label{color:var(--brand-cream)}
.xp-hero h1{font-size:clamp(3.4rem,9vw,8.5rem);line-height:.86}
.xp-hero h1 em{font-style:normal;color:var(--brand-cream);}
.xp-hero__pics{position:relative;aspect-ratio:1/1.05;max-width:34rem;width:100%;justify-self:center}
.xp-hero__pic{position:absolute;width:46%;aspect-ratio:3/4;border:.4rem solid var(--brand-cream);border-radius:1rem;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35);animation:xpFloat 6s ease-in-out infinite}
.xp-hero__pic img{width:100%;height:100%;object-fit:cover;border-radius:0}
.xp-hero__pic--1{top:0;left:0;rotate:-6deg}
.xp-hero__pic--2{top:6%;right:0;rotate:5deg;animation-delay:-1.5s}
.xp-hero__pic--3{bottom:0;left:6%;rotate:4deg;animation-delay:-3s}
.xp-hero__pic--4{bottom:4%;right:2%;rotate:-5deg;animation-delay:-4.5s}

.xp-marquee{background:var(--brand-cream);color:var(--brand-black);overflow:hidden;padding-block:1rem;border-block:3px solid var(--brand-black)}
.xp-marquee__track{display:flex;width:max-content;gap:2rem;animation:xpMarquee 45s linear infinite;font-family:var(--font-display);font-size:clamp(1.6rem,3.5vw,2.8rem);align-items:center}
.xp-marquee i{color:var(--brand-magenta);font-style:normal}

.xp-block{padding-block:clamp(3.5rem,8vw,7rem);color:#fff;position:relative;overflow:hidden}
.xp-block--black{background:var(--brand-black)}
.xp-block--purple{background:var(--brand-purple)}
.xp-block--magenta{background:var(--brand-magenta)}
.xp-block__head{display:grid;grid-template-columns:auto 1fr;column-gap:1.25rem;align-items:end;margin-bottom:clamp(2rem,5vw,3.5rem)}
.xp-block__num{grid-column:1/-1;font-family:var(--font-body);font-weight:600;letter-spacing:.16em;font-size:var(--fs-xs);color:var(--brand-cream);margin-bottom:.75rem}
.xp-block--black .xp-block__num{color:var(--brand-magenta)}
.xp-block h2{font-size:clamp(3.4rem,11vw,9rem);line-height:.85;grid-column:1/-1;margin-bottom:1rem}
.xp-block--black h2{color:var(--brand-cream)}
.xp-block__head p{grid-column:1/-1;color:rgba(255,255,255,.92);font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.6;max-width:40ch;font-weight:500}

/* MEMORY WALL: polaroids taped to the wall */
.xp-wall{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(1rem,2.5vw,2rem) clamp(.75rem,2vw,1.5rem);padding:clamp(1rem,3vw,2.5rem);border-radius:1.5rem;background-color:rgba(0,0,0,.18);background-image:radial-gradient(rgba(255,244,210,.16) 1.2px,transparent 1.3px);background-size:22px 22px}
.xp-block--black .xp-wall{background-color:rgba(102,45,145,.22)}
.xp-pol{position:relative;width:clamp(9.5rem,21vw,15.5rem);padding:.55rem .55rem .4rem;background:var(--brand-cream);color:var(--brand-black);border-radius:.25rem;box-shadow:0 14px 28px rgba(0,0,0,.35);rotate:var(--r,0deg);transition:rotate .35s ease,box-shadow .35s ease,opacity .6s ease,translate .6s cubic-bezier(.22,1,.36,1)}
.xp-pol--big{width:clamp(11rem,28vw,21rem)}
.xp-pol:nth-child(even){margin-top:clamp(.75rem,3vw,2.5rem)}
.xp-pol img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:0}
.xp-pol--big img{aspect-ratio:4/5}
.xp-pol figcaption{padding:.55rem .15rem .25rem;font-family:var(--font-body);font-weight:600;font-size:clamp(.65rem,1.1vw,.8rem);letter-spacing:.04em;text-align:center}
.xp-pol__tape{position:absolute;top:-.7rem;width:4.2rem;height:1.4rem;background:rgba(251,3,118,.75);box-shadow:0 2px 4px rgba(0,0,0,.2);z-index:1}
.xp-block--magenta .xp-pol__tape{background:rgba(102,45,145,.8)}
.xp-pol__tape--tl{left:.8rem;rotate:-12deg}
.xp-pol__tape--tr{right:.8rem;rotate:10deg}
.xp-pol__tape--tc{left:calc(50% - 2.1rem);rotate:-3deg}
@media (hover:hover){.xp-pol:hover{rotate:0deg;box-shadow:0 20px 40px rgba(0,0,0,.5);z-index:2}}

.xp-finale{position:relative;overflow:hidden;padding-block:clamp(4rem,10vw,9rem);background:var(--brand-purple);color:#fff;isolation:isolate}
.xp-finale::before{content:"";position:absolute;width:clamp(18rem,45vw,38rem);aspect-ratio:1;border-radius:50%;background:#7c3aa8;top:-30%;right:-10%;z-index:-1}
.xp-fin__layout{display:block}
.xp-fin__text h2{display:flex;flex-direction:column;white-space:nowrap;font-size:clamp(2.3rem,5.6vw,5.4rem);line-height:.86;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.xp-fin__l1{color:var(--brand-cream)}
.xp-fin__l2{color:#fff}
.xp-fin__l3{color:var(--brand-magenta);text-shadow:none;-webkit-text-stroke:0}
.xp-fin__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.xp-fin__chip{padding:.5rem 1rem;font-family:var(--font-body);font-weight:600;font-size:clamp(.72rem,1.2vw,.9rem);letter-spacing:.08em;text-transform:uppercase;background:var(--brand-cream);color:var(--brand-black);rotate:-3deg}
.xp-fin__chip:nth-child(even){rotate:2.5deg;background:var(--brand-magenta);color:#fff}
.xp-fin__chip:nth-child(3n){rotate:-1deg;background:#fff;color:var(--brand-purple)}
.xp-fin__btn{display:inline-flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.15rem 1.6rem;background:var(--brand-cream);color:var(--brand-black);font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.3rem);text-transform:uppercase;letter-spacing:.02em;box-shadow:6px 6px 0 var(--brand-magenta);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease}
.xp-fin__btn-arrow{font-family:var(--font-body);font-size:1.5rem;line-height:1;transition:transform .25s}
.xp-fin__btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--brand-magenta)}
@media (hover:hover){.xp-fin__btn:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--brand-magenta)}.xp-fin__btn:hover .xp-fin__btn-arrow{transform:translateX(6px)}}
.xp-fin__pics{position:relative;aspect-ratio:1/1.05;width:100%;max-width:30rem;justify-self:center}
.xp-fin__pol{position:absolute;width:56%;padding:.5rem .5rem .35rem;background:var(--brand-cream);color:var(--brand-black);box-shadow:0 18px 40px rgba(0,0,0,.4);animation:xpFloat 7s ease-in-out infinite}
.xp-fin__pol img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:0}
.xp-fin__pol figcaption{padding:.5rem .1rem .2rem;font-family:var(--font-body);font-weight:600;font-size:.7rem;letter-spacing:.04em;text-align:center}
.xp-fin__pol--1{top:0;left:0;rotate:-6deg}
.xp-fin__pol--2{top:18%;right:0;rotate:5deg;animation-delay:-2s}
.xp-fin__pol--3{bottom:0;left:16%;rotate:-2deg;animation-delay:-4s}

@keyframes xpFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes xpBlob{to{transform:translate(-40px,50px) scale(1.15)}}
@keyframes xpWiggle{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.06)}}
@keyframes xpMarquee{to{transform:translateX(-50%)}}

@media (max-width:820px){
  .xp-hero__pic,.xp-fin__pol{animation:none}
  .xp-fin__layout{grid-template-columns:1fr}
  .xp-fin__text h2{font-size:clamp(2.3rem,11.5vw,4.5rem)}
  .xp-fin__pics{max-width:22rem}
  .xp-fin__btn{width:100%}
  .xp-marquee__track{animation-duration:60s}
  .xp-hero__blob--a{width:20rem;height:20rem}
  .xp-pol,.xp-pol--big{width:calc(50% - .5rem)}
  .xp-pol--big:first-child{width:100%}
  .xp-pol:nth-child(even){margin-top:.5rem}
  .xp-wall{padding:1rem .75rem}
  .xp-hero__layout{grid-template-columns:1fr}
  .xp-hero__pics{max-width:24rem}
}
@media (prefers-reduced-motion:reduce){
  .xp-hero__pic,.xp-fin__pol,.xp-marquee__track{animation:none}
}