/* Rexona FIFA World Cup 2026: Behind the Work. Moved from storiesroomtwentytwo.netlify.app
   into the main site. Every rule is scoped to .rx so the site header, footer and
   theme are untouched; the case study itself stays on its black canvas. */
.rx{--black:#000;--orange:#FE5918;--white:#F4F3EF;--soft:#B7B7B7;--neutral:#767676;--graphite:#1A1A1A;
--head:var(--font-head);--body:var(--font-body);
--g:clamp(1.25rem,4vw,4rem);--r:1rem}
.rx,.rx *,.rx *::before,.rx *::after{box-sizing:border-box}
.rx{margin:0;background:var(--black);color:var(--white);font:400 clamp(1rem,.95rem + .2vw,1.125rem)/1.6 var(--body);font-synthesis:none}
.rx h1,.rx h2,.rx h3,.rx p,.rx figure{margin:0}
.rx a{color:var(--orange);text-underline-offset:.2em}
.rx :focus-visible{outline:2px solid var(--white);outline-offset:4px}
.rx .wrap{padding-inline:var(--g);max-width:90rem;margin-inline:auto}
.rx .eyebrow{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.rx .eyebrow b{color:var(--orange);font-weight:700;margin-right:.75em}
.rx h1,.rx h2{font-family:var(--head);font-weight:700;letter-spacing:.015em;line-height:1.12;text-wrap:balance}
.rx .ln{display:block}
.rx h2{font-size:clamp(1.875rem,1.2rem + 3.2vw,4.25rem)}
.rx h3{font-family:var(--head);font-weight:400;font-size:clamp(1.25rem,1.1rem + .8vw,1.75rem);line-height:1.2}
.rx .lede{font-family:var(--head);font-size:clamp(1.15rem,1rem + .9vw,1.6rem);line-height:1.4;max-width:34ch}
.rx .muted{color:var(--soft)}
.rx .btn{display:inline-flex;align-items:center;gap:.5rem;min-height:3rem;padding:.75rem 1.5rem;border-radius:.75rem;border:1px solid var(--orange);background:var(--orange);color:#000;text-decoration:none;font:inherit;cursor:pointer}
.rx .btn.sec{background:#000;color:var(--orange)}
.rx .btn:hover{text-decoration:underline}
.rx section{position:relative}
.rx .ph{position:relative;background:var(--graphite);border:1px dashed var(--neutral);border-radius:var(--r);overflow:hidden}
.rx .ph img,.rx .ph video{display:block;width:100%;height:100%;object-fit:contain}
.rx .ph.miss{border-style:solid;border-color:var(--graphite)}
.rx .ph.miss img{visibility:hidden}
.rx .cap{font-size:.875rem;color:var(--soft);line-height:1.5;margin-top:.75rem;max-width:60ch}
.rx .tag{display:inline-block;border:1px solid var(--neutral);border-radius:999px;padding:.15rem .75rem;font-size:.8125rem;color:var(--white)}
.rx .logo{display:block;height:clamp(1.75rem,1.4rem + 1vw,2.5rem);width:auto;max-width:60vw}
.rx .hero{min-height:100svh;display:grid;align-items:end;overflow:hidden}
.rx .hero .bg{position:absolute;inset:0;will-change:transform}
.rx .hero .bg .ph{height:100%;border:0;border-radius:0}
.rx .hero .bg img{object-fit:cover;object-position:var(--pos,50% 35%);transform:scale(1.06);animation:settle 2.4s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes settle{to{transform:scale(1)}}
.rx .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 30%,rgba(0,0,0,0) 54%),linear-gradient(0deg,#000 0%,rgba(0,0,0,.55) 18%,rgba(0,0,0,0) 44%)}
.rx .hero .wrap{position:relative;z-index:2;width:100%;padding-block:0 clamp(2rem,6vw,4.5rem)}
.rx .hero h1{font-size:clamp(2.5rem,1rem + 4.2vw,5.25rem);max-width:14ch;margin:1rem 0 1.5rem}
.rx .hero h1 span{display:block}
.rx .hero h1 em{font-style:normal;color:var(--orange)}
.rx .hero .row{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:flex-end;justify-content:space-between}
.rx .moment{padding-block:clamp(4rem,9vw,8rem)}
.rx .split{display:grid;gap:2rem 4rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:60rem){.rx .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.rx .split.even{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.rx .scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:2rem}
.rx .scenes .ph{aspect-ratio:16/9;border-radius:.5rem}
.rx .scenes span{display:block;font-size:.8125rem;color:var(--soft);margin-top:.4rem}
.rx .lbl{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.5rem;color:var(--soft)}
.rx .lbl.f{color:var(--orange)}
.rx .format{padding-block:clamp(4rem,9vw,8rem)}
.rx .stage{background:var(--graphite);border-radius:var(--r);padding:clamp(.75rem,2vw,1.5rem);margin-top:2rem}
.rx .stage .ph{height:min(70svh,44rem);background:#000;border:0}
.rx .seg{display:flex;flex-wrap:wrap;gap:.5rem}
.rx .seg button{min-height:2.75rem;padding:.5rem 1.25rem;border-radius:999px;border:1px solid var(--neutral);background:#000;color:var(--white);font:inherit;font-size:.9375rem;cursor:pointer}
.rx .seg button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#000}
.rx .seg button[aria-pressed="true"]::before{content:"✓ "}
.rx .motion{padding-block:clamp(4rem,9vw,8rem);background:linear-gradient(#000,var(--graphite) 50%,#000)}
.rx .motion .split{align-items:center}
.rx .screen{position:relative;margin-inline:auto;aspect-ratio:var(--ar,9/16);width:min(100%,calc(76svh*var(--ar,.5625)))}
.rx .screen video{position:absolute;z-index:1;background:#000;object-fit:cover;visibility:hidden;left:var(--sx,0);top:var(--sy,0);width:var(--sw,100%);height:var(--sh,100%)}
.rx .screen img{position:relative;z-index:2;display:block;width:100%;height:100%;pointer-events:none;user-select:none}
.rx .screen.aligned video{visibility:visible}
.rx .screen.plain{aspect-ratio:9/16;width:min(100%,calc(76svh*.5625))}
.rx .screen.plain img{display:none}
.rx .screen.plain video{visibility:visible;inset:0;width:100%;height:100%;left:0;top:0;border-radius:var(--r)}
.rx .screen-ui{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:1.25rem}
.rx .sctl{display:flex;align-items:center;gap:.75rem}
.rx .cbtn{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--neutral);background:#000;color:var(--white);cursor:pointer;transition:border-color .2s ease,color .2s ease}
.rx .cbtn:hover{border-color:var(--orange);color:var(--orange)}
.rx .dots{display:flex;gap:.25rem}
.rx .dot{width:2.75rem;height:2.75rem;display:grid;place-items:center;background:none;border:0;cursor:pointer;padding:0}
.rx .dot i{display:block;width:.5rem;height:.5rem;border-radius:50%;background:var(--neutral);transition:background .2s ease,transform .2s ease}
.rx .dot[aria-current="true"] i{background:var(--orange);transform:scale(1.35)}
.rx .slabel{font-size:.9375rem;color:var(--soft);text-align:center}
.rx .slabel b{color:var(--white);font-weight:700}
.rx .vid{max-width:26rem;margin-inline:auto;width:100%}
.rx .vid .ph{aspect-ratio:9/16;background:#000}
.rx .vid video{object-fit:contain;width:100%;height:100%}
.rx .packs{padding-block:clamp(4rem,9vw,8rem)}
.rx .packstage{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:60rem){.rx .packstage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.rx .packstage .ph{aspect-ratio:9/16;max-height:80svh;margin-inline:auto;background:#000}
.rx .packstage .ph.gif{aspect-ratio:874/850;max-height:none}
.rx .packnav{display:flex;flex-direction:column;gap:1.5rem;justify-content:center}
.rx .outputs{padding-block:clamp(3rem,7vw,6rem);overflow:clip}
.rx .links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.rx .credit{padding-block:clamp(4rem,9vw,7rem);border-top:1px solid var(--graphite)}
.rx .credit blockquote{margin:1.5rem 0 2.5rem;font-family:var(--head);font-size:clamp(1.25rem,1rem + 1.5vw,2.25rem);line-height:1.25;max-width:28ch;border-left:3px solid var(--orange);padding-left:1.25rem}
.rx .rx-foot{padding:2rem var(--g);color:var(--soft);font-size:.8125rem;line-height:1.6;border-top:1px solid var(--graphite)}
.rx .rx-foot .wrap{padding-inline:0;display:grid;gap:.75rem}
.rx .rx-foot .fine{max-width:75ch;color:var(--neutral)}
.rx .ph.clean{border-style:solid;border-color:var(--graphite);background:#000}
.rx .ph.clean img{object-fit:cover;object-position:var(--pos,50% 40%)}
.rx .viewer img{position:absolute;inset:0}
.rx .viewer img.fade{opacity:0;transition:opacity .55s ease}
.rx .viewer img.fade.in{opacity:1}
.rx .kind{display:inline-block;border:1px solid var(--neutral);border-radius:999px;padding:.15rem .75rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.rx .kind.fin{border-color:var(--orange);color:var(--orange)}
.rx .reel{margin-top:clamp(2rem,4vw,3.5rem)}
.rx .viewer{aspect-ratio:16/9;width:100%}
.rx .cl-cap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:1rem}
.rx .cl-cap strong{font-family:var(--head);font-size:1.125rem}
.rx .cl-cap .muted{font-size:.9375rem}
.rx .reactions{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,1.6vw,1.25rem);margin-top:1.5rem}
.rx .rbtn{background:none;border:0;padding:0;color:var(--white);font:inherit;text-align:left;cursor:pointer;min-height:2.75rem}
.rx .rbtn .ph{display:block;aspect-ratio:16/10;border:2px solid var(--graphite);border-radius:.625rem;opacity:.72;transition:opacity .25s ease,border-color .25s ease}
.rx .rbtn:hover .ph{opacity:1}
.rx .rbtn[aria-pressed="true"] .ph{border-color:var(--orange);opacity:1}
.rx .rbtn .rl{display:block;margin-top:.625rem;font-size:1rem;line-height:1.3;color:var(--soft)}
.rx .rbtn[aria-pressed="true"] .rl{color:var(--white)}
.rx .rbtn[aria-pressed="true"] .rl::before{content:"✓ ";color:var(--orange)}
.rx .fin-label{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:2.5rem 0 .75rem}
.rx .fin-label span.muted{font-size:.875rem}
.rx .fin-pair{display:grid;gap:.75rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:48rem){.rx .fin-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.rx .fin-pair .ph,.rx .fin-ultra{aspect-ratio:16/9;background:#000}
.rx .fin-ultra{aspect-ratio:5464/1536}
.rx .fin-port{display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:60rem){.rx .fin-port{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.rx .fin-port .ph{aspect-ratio:9/16;background:#000}
@media(max-width:47.99rem){.rx .viewer{aspect-ratio:4/3}
.rx .ph.clean img{object-position:var(--pos-m,var(--pos,50% 40%))}
.rx .reactions{grid-template-columns:repeat(2,1fr)}

}
.rx .credit .grid{display:grid;gap:3rem;align-items:center;grid-template-columns:minmax(0,1fr)}
.rx .credit h2{font-size:clamp(2rem,1rem + 3.4vw,3.75rem);max-width:none;margin:1rem 0 1.75rem}
.rx .credit h2 em{font-style:normal;color:var(--orange)}
.rx .credit .iconwrap{position:relative;overflow:hidden;width:100%;max-width:clamp(19rem,31vw,28rem);aspect-ratio:1/1;margin-inline:auto;background:#000;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.rx .credit .icon{position:absolute;display:block;max-width:none;height:auto;width:100%;left:0;top:0}
.rx .credit .iconcol[hidden]{display:none}
@media(min-width:60rem){.rx .credit .grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:4rem}
.rx .credit .grid.noicon{grid-template-columns:minmax(0,1fr)}
}
.rx .credit .site{display:inline-block;margin-top:1.5rem;color:var(--white);font-size:1.0625rem}
.rx .credit .site:hover{color:var(--orange)}
.rx .fine{margin-top:1.5rem}
.rx .stage .ph{display:block;margin-inline:auto}
.rx .stage .ph[data-fmt="land"]{height:auto;aspect-ratio:16/9;width:100%}
.rx .stage .ph[data-fmt="ultra"]{height:auto;aspect-ratio:5464/1536;width:100%}
.rx .stage .ph[data-fmt="port"]{height:min(70svh,44rem);aspect-ratio:9/16;width:auto;max-width:100%}
@media(max-width:47.99rem){.rx .hero{display:block;min-height:0;overflow:visible}
.rx .hero::after{display:none}
.rx .hero .bg{position:static;aspect-ratio:16/9;background:#000}
.rx .hero .bg .ph{height:100%}
.rx .hero .bg img{object-fit:cover;object-position:var(--pos-m,var(--pos,50% 35%));transform:none;animation:none}
.rx .hero .wrap{padding-block:1.75rem 3rem}
.rx .hero h1{font-size:clamp(1.75rem,8vw,2.5rem);max-width:none;margin:.75rem 0 1.25rem;line-height:1.1}
.rx .hero .row{flex-direction:column;align-items:flex-start;gap:1.5rem}
.rx .lede{max-width:none}
.rx .scenes{grid-template-columns:repeat(2,1fr);gap:.75rem}
.rx .scenes span{font-size:.875rem}
.rx .btn,.rx .links .btn{width:100%;justify-content:center}
.rx .stage .ph[data-fmt="port"]{height:auto;width:min(100%,24rem)}

}
@media(min-width:60rem){.rx .hero .bg img{object-position:10% 42%}
.rx .hero .wrap{padding-bottom:clamp(2rem,5vw,3.5rem)}
.rx .hero .lede{max-width:26ch}
}
@media(max-width:59.99rem){.rx .hero{display:block;min-height:0;overflow:visible}
.rx .hero::after{display:none}
.rx .hero .bg{position:static;aspect-ratio:16/9;background:#000}
.rx .hero .bg .ph{height:100%}
.rx .hero .bg img{object-fit:cover;object-position:var(--pos-m,var(--pos,50% 50%));transform:none;animation:none}
.rx .hero .wrap{padding-block:1.75rem 3rem}
.rx .hero h1{font-size:clamp(1.75rem,5.5vw,3rem);max-width:none;margin:.75rem 0 1.25rem}
.rx .hero .row{flex-direction:column;align-items:flex-start;gap:1.5rem}

}
.rx .story{padding-block:clamp(4rem,9vw,8rem) clamp(2rem,5vw,4rem)}
.rx .story-intro{font-family:var(--head);font-size:clamp(1.25rem,1rem + 1.2vw,1.875rem);line-height:1.35;max-width:36ch;margin-top:clamp(1.5rem,3vw,2.25rem);color:var(--white)}
.rx .tvc{margin:clamp(1.75rem,3.5vw,3rem) 0 0}
.rx .tvc-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden;border:1px solid var(--graphite)}
.rx .tvc-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.rx .tvc-play{position:absolute;inset:0;display:grid;place-items:center;width:100%;border:0;cursor:pointer;color:#000;background:linear-gradient(0deg,rgba(0,0,0,.35),rgba(0,0,0,0))}
.rx .tvc-play span{display:grid;place-items:center;width:clamp(4rem,8vw,6rem);aspect-ratio:1;border-radius:50%;background:var(--orange);font-size:clamp(1.25rem,2.4vw,2rem);padding-left:.2em;transition:transform .2s ease}
.rx .tvc-play:hover span{transform:scale(1.06)}
.rx .tvc-frame.playing .tvc-play{display:none}
.rx .blocks{display:grid;gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(1.75rem,3vw,2.5rem);grid-template-columns:minmax(0,1fr)}
@media(min-width:48rem){.rx .blocks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.rx .blk{border-top:2px solid var(--orange);padding-top:1rem}
.rx .blk h3{font-family:var(--head);font-weight:700;font-size:clamp(1.25rem,1.05rem + .9vw,1.625rem);letter-spacing:.01em;margin-bottom:.6rem}
.rx .blk p{color:var(--soft);max-width:48ch}
.rx .insitu{padding-block:clamp(3rem,7vw,6rem)}
.rx .insitu[hidden]{display:none}
.rx .car{margin-top:clamp(2rem,4vw,3.5rem);width:100vw;margin-left:calc(50% - 50vw)}
.rx .car-vp{overflow:hidden;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.rx .car-track{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.25rem);transition:transform .95s cubic-bezier(.22,.61,.36,1);will-change:transform}
.rx .cs{flex:0 0 auto;margin:0;opacity:.3;transform:scale(.9);transition:opacity .95s ease,transform .95s cubic-bezier(.22,.61,.36,1);cursor:pointer}
.rx .cs.on{opacity:1;transform:none;cursor:default}
.rx .cs img{display:block;width:auto;height:auto;max-height:min(62svh,35rem);max-width:min(64vw,68rem);border-radius:var(--r);background:var(--graphite);pointer-events:none}
.rx .car.noanim .car-track,.rx .car.noanim .cs{transition:none!important}
.rx .cbtn svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.rx .car-ctl{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem}
.rx .car-ctl .dots{display:flex;gap:.25rem}
.rx .car .slabel{text-align:center;margin-top:.9rem}
@media(max-width:47.99rem){.rx .cs{flex:0 0 100%;padding-inline:1rem;opacity:0;transform:none}
.rx .cs.on{opacity:1}
.rx .cs img{width:100%;max-width:none;max-height:none}
.rx .car-vp{cursor:auto}

}
.rx .tvc-links{margin-top:1.75rem;font-size:.9375rem;color:var(--soft);max-width:70ch}
.rx .tvc-links a{color:var(--soft)}
.rx .tvc-links a:hover{color:var(--orange)}
.rx .mock-row{margin-top:clamp(2rem,5vw,4rem)}
.rx .mock-pair{display:grid;gap:clamp(.75rem,2vw,1.5rem);grid-template-columns:minmax(0,1fr)}
@media(min-width:48rem){.rx .mock-pair{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.rx .mock-pair .mock:nth-child(2){margin-top:clamp(0rem,5vw,5rem)}
}
.rx .mock img{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--graphite)}
.rx .mock figcaption{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin-top:.75rem;font-size:.9375rem;color:var(--soft)}
@media(max-width:47.99rem){.rx .credit h2{font-size:clamp(1.5rem,6.6vw,2rem)}
.rx .credit h2 .ln{display:inline}
.rx .credit{overflow-x:clip;padding-top:0}
.rx .credit .grid{gap:1.5rem}
.rx .credit .iconcol{order:-1}
.rx .credit .iconwrap{width:100vw;max-width:none;margin-inline:calc(50% - 50vw)}
.rx .credit .icon{width:113.21%;left:-5.66%;top:-6.51%}

}
.rx .rv{opacity:0;transform:translateY(1.25rem);transition:opacity .7s ease,transform .7s ease}
.rx .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rx *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.rx .rv{opacity:1;transform:none}
.rx .hero .bg img{transform:none}
}


/* Inside the site: the site header sits above the hero, so the hero fills the rest of the first screen. */
.rx{display:block}
@media(min-width:60rem){.rx .hero{min-height:calc(100svh - 5.5rem)}}
.rx-foot{padding:2rem var(--g);color:var(--soft);font-size:.8125rem;line-height:1.6;border-top:1px solid var(--graphite)}