:root{--gutter:var(--page-gutter)}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font-family:Satoshi,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
.eyebrow{font-size:16px;line-height:1.4;font-weight:500;text-transform:uppercase;color:var(--red)}
.case-hero{padding-block:64px 56px}
.case-hero h1{max-width:1180px;margin-top:28px;font-size:60px;line-height:1.2;letter-spacing:-.05em}
.hero-summary{max-width:850px;font-size:20px;line-height:1.4;margin-top:28px}
.hero-image{width:100%;aspect-ratio:1328/560;object-fit:cover;border-radius:32px;margin-top:28px}
.overview{display:grid;grid-template-columns:460px minmax(0,1fr);gap:80px;padding-block:40px 88px}
.overview h2,.case-section h2{font-size:40px;line-height:1.2;letter-spacing:-.02em;margin-top:20px}
.overview-copy p,.section-description p,.split-copy>p:not(.eyebrow):not(.feature-lines),.duo-columns article>p:not(.eyebrow){font-size:20px;line-height:1.4}
.overview-copy p+p,.section-description p+p,.split-copy>p+p,.duo-columns article>p+p{margin-top:28px}
.scope-tags{display:flex;flex-wrap:wrap;gap:10px 18px;list-style:none;padding:0;margin:28px 0 0;color:var(--red);font-size:18px;line-height:1.5}
.scope-tags li:not(:last-child)::after{content:"/";margin-left:18px}
.case-section{padding-block:88px}
.tone-muted{background:var(--muted);padding-block:80px}
.tone-dark{background:var(--ink);color:#f8f8f5}
.case-intro{display:grid;grid-template-columns:minmax(0,500px) 18px minmax(0,1fr);gap:40px;align-items:center}
.case-intro h2{margin-top:16px}
.red-mark{background:var(--red);border-radius:40px;width:18px;height:42px}
.section-description{padding-left:20px}
.showcase{margin-top:40px}
.showcase img,.split-media img{border-radius:24px;object-fit:cover}
.showcase.pair{display:grid;grid-template-columns:minmax(0,2.7fr) minmax(0,1fr);gap:32px;max-width:1296px}
.showcase.pair-even{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.showcase.wide img{width:100%;height:auto}
.showcase video{display:block;width:100%;height:auto;border-radius:24px;background:#0d1a2b}
.showcase .showcase-image{width:100%;height:100%;min-width:0}
.showcase figure{margin:0;min-width:0}
.showcase figure img{width:100%;height:auto}
.showcase figcaption{font-size:18px;line-height:1.4;margin-top:12px}
.showcase.pair img{max-height:650px}
body[data-case="the-ocean-race"] .showcase.pair{max-width:1160px;margin-inline:auto}
body[data-case="formula-e"] .showcase.pair{max-width:1194px;margin-inline:auto;grid-template-columns:minmax(0,900px) minmax(0,262px)}
body[data-case="copa-argentina"] .showcase.pair{max-width:1212px;margin-inline:auto;grid-template-columns:minmax(0,830px) minmax(0,350px)}
.split-layout{display:grid;grid-template-columns:minmax(0,492px) minmax(0,1fr);gap:64px;align-items:start}
.split-copy h2{margin-top:28px}
.split-copy>p:not(.eyebrow){margin-top:28px}
.split-copy .feature-lines{font-size:20px;line-height:1.4}
.split-media{min-width:0;display:flex;align-items:center;justify-content:center}
.split-media img{width:100%;height:auto}
.split-media.app-pair{gap:24px}
.split-media.app-pair img{width:min(48%,280px);height:auto;object-fit:contain}
.metric-panel{list-style:none;margin:0;padding:36px 44px;background:var(--dark);border-radius:24px;display:grid;gap:22px;font-size:32px;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.duo-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px}
.duo-columns h2{margin-top:24px}
.duo-columns article>p:not(.eyebrow){margin-top:24px}
.image-note{font-size:16px;line-height:1.5;color:#73737a;margin-top:14px}
figcaption{font-size:18px;line-height:1.4}
.layout-text{min-height:290px}
.layout-text .case-intro{align-items:start}
.layout-text .red-mark{display:none}
.layout-text .section-description{padding-left:0}
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.next-case{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px max(var(--gutter),calc((100vw - var(--max))/2));background:#f8f8f8}
.next-case>span{font-size:18px;color:var(--red);text-transform:uppercase}
.next-case strong{font-size:28px}
.next-case:hover strong{color:var(--red)}
.index-hero{padding-block:96px 72px}
.index-hero h1{font-size:clamp(54px,6vw,84px);line-height:1.04;letter-spacing:-.055em;max-width:900px;margin-top:20px}
.index-hero>p:last-child{font-size:22px;line-height:1.4;margin-top:28px;max-width:700px}
.index-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px;padding-bottom:112px}
.index-card{scroll-margin-top:24px}
.index-card a{display:block}
.index-image{width:100%;aspect-ratio:1.6;object-fit:cover;border-radius:28px}
.index-card-bottom{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-top:18px}
.index-card-bottom span:first-child{display:grid;gap:6px}
.index-card-bottom small{font-size:16px;color:var(--red);text-transform:uppercase}
.index-card-bottom strong{font-size:32px;line-height:1.2}
.index-card-bottom>span:last-child{font-size:30px}
.index-card:hover .index-card-bottom strong{color:var(--red)}
@media(max-width:1100px){
  .overview{grid-template-columns:minmax(0,390px) 1fr;gap:48px}
  .case-intro{grid-template-columns:minmax(0,410px) 14px 1fr;gap:28px}
  .red-mark{width:14px}
  .section-description{padding-left:0}
  .split-layout{grid-template-columns:minmax(0,410px) 1fr;gap:40px}
}
@media(max-width:800px){
  .case-hero{padding-block:54px 44px}
  .case-hero h1{font-size:clamp(44px,7vw,60px)}
  .overview,.case-intro,.split-layout{grid-template-columns:1fr;gap:24px}
  .red-mark{width:42px;height:12px}
  .section-description{padding-left:0}
  .overview{padding-block:32px 72px}
  .case-section{padding-block:72px}
  .split-media{justify-content:flex-start}
  .duo-columns{gap:36px}
}
@media(max-width:620px){
  .case-hero{padding-block:48px 32px}
  .case-hero h1{font-size:clamp(40px,10vw,52px);line-height:1.08;margin-top:20px}
  .hero-summary{font-size:18px;line-height:1.45;margin-top:22px}
  .hero-image{aspect-ratio:1.26;border-radius:20px;margin-top:28px}
  .overview{padding-block:36px 64px;gap:28px}
  .overview h2,.case-section h2{font-size:34px;line-height:1.16;margin-top:14px}
  .overview-copy p,.section-description p,.split-copy>p:not(.eyebrow):not(.feature-lines),.duo-columns article>p:not(.eyebrow){font-size:18px;line-height:1.5}
  .overview-copy p+p,.section-description p+p{margin-top:18px}
  .scope-tags{font-size:14px;gap:8px 12px;margin-top:22px}
  .scope-tags li:not(:last-child)::after{margin-left:12px}
  .case-section{padding-block:64px}
  .case-intro{gap:20px}
  .red-mark{width:36px;height:8px}
  .showcase{margin-top:28px}
  .showcase.pair,.showcase.pair-even{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);margin-right:calc(-1*var(--gutter));padding-right:var(--gutter);padding-bottom:8px;scrollbar-width:none}
  .showcase.pair::-webkit-scrollbar,.showcase.pair-even::-webkit-scrollbar,.duo-columns::-webkit-scrollbar{display:none}
  .showcase.pair>img,.showcase.pair-even>img,.showcase.pair-even>figure{flex:0 0 min(82vw,520px);width:min(82vw,520px);height:auto;scroll-snap-align:start}
  .showcase.pair>img:nth-child(2){flex-basis:min(60vw,350px);width:min(60vw,350px);max-height:520px;object-fit:contain}
  .showcase.pair-even figure img{aspect-ratio:648/356;object-fit:cover;height:auto}
  .showcase.pair-even{display:block;overflow:visible;scroll-snap-type:none;margin-right:0;padding:0}
  .showcase.pair-even>figure,.showcase.pair-even>img{width:100%;flex:none}
  .showcase.pair-even>*+*{margin-top:28px}
  .showcase img,.split-media img,.showcase video{border-radius:16px}
  .split-layout{gap:28px}
  .split-copy h2{margin-top:16px}
  .split-copy>p:not(.eyebrow){margin-top:18px}
  .split-copy .feature-lines{font-size:18px}
  .split-media.app-pair{gap:10px}
  .metric-panel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:transparent;border-radius:0;padding:0;margin-right:calc(-1*var(--gutter));padding-right:var(--gutter);gap:12px;font-size:20px}
  .metric-panel li{flex:0 0 min(56vw,230px);min-height:84px;padding:24px;background:var(--dark);border-radius:18px;scroll-snap-align:start}
  .duo-columns{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(-1*var(--gutter));padding-right:var(--gutter);padding-bottom:8px;scrollbar-width:none}
  .duo-columns article{flex:0 0 min(82vw,430px);scroll-snap-align:start}
  .duo-columns h2{margin-top:16px}
  .duo-columns article>p:not(.eyebrow){margin-top:18px}
  .next-case{display:grid;gap:12px}
  .next-case strong{font-size:24px}
  .index-hero{padding-block:68px 52px}
  .index-hero h1{font-size:clamp(44px,11vw,58px)}
  .index-hero>p:last-child{font-size:18px}
  .index-grid{grid-template-columns:1fr;gap:36px;padding-bottom:72px}
  .index-image{border-radius:20px}
  .index-card-bottom strong{font-size:28px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

.case-back{display:inline-block;margin-top:28px;font-size:15px;color:var(--red);font-weight:500}
.case-back:hover{text-decoration:underline}
.section-link{margin-top:22px}
/* metrics panel, animated: slanted stripes sweep, the colour changes and the lines add up (METRIC_JS) */
.metric-anim{--bg:#21202a;position:relative;overflow:hidden;border-radius:24px;background:var(--bg);transition:background-color .2s linear}
.metric-anim .metric-panel{position:relative;z-index:1;background:transparent;color:#fff}
.metric-anim.js li{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.metric-anim.js li.in{opacity:1;transform:none}
.mstripes{position:absolute;z-index:2;top:-30%;bottom:-30%;left:0;width:70%;transform:translateX(-160%) skewX(-18deg);pointer-events:none;display:flex}
.mstripes i{display:block;height:100%}
.mstripes .s1{width:8%;background:rgba(255,255,255,.22)}.mstripes .s2{width:14%;background:#ff2542}.mstripes .s3{width:5%;background:#21202a}
.mstripes .s4{width:18%;background:#c8102e}.mstripes .s5{width:6%;background:rgba(255,255,255,.35)}.mstripes .s6{width:22%;background:#ff2542}
.mstripes.go{animation:mSweep .8s cubic-bezier(.6,0,.3,1)}
@keyframes mSweep{from{transform:translateX(-160%) skewX(-18deg)}to{transform:translateX(230%) skewX(-18deg)}}
@media(max-width:620px){
  .metric-anim{border-radius:18px}
  .metric-anim .metric-panel{display:grid;overflow:visible;margin:0;padding:26px 24px;gap:14px;font-size:22px}
  .metric-anim .metric-panel li{flex:none;min-height:0;padding:0;background:none;border-radius:0}
}
@media(prefers-reduced-motion:reduce){.metric-anim.js li{opacity:1;transform:none}.mstripes{display:none}}

/* client quote between sections */
.tone-red{background:var(--red);color:#fff}
.layout-quote{padding-block:96px}
.case-quote{margin:0;max-width:1000px}
.case-quote blockquote{margin:0}
.case-quote p{font-size:clamp(24px,3vw,38px);line-height:1.3;font-weight:500;letter-spacing:-.01em;font-style:italic}
.case-quote figcaption{margin-top:28px;display:flex;flex-direction:column;gap:4px;font-size:18px}
.case-quote figcaption span{opacity:.8}
@media(max-width:620px){.layout-quote{padding-block:64px}}

/* vertical social pieces side by side; a swipeable row on phones */
.showcase.reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.showcase.reels video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:24px;background:#16151c}
@media(max-width:620px){
  .showcase.reels{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .showcase.reels::-webkit-scrollbar{display:none}
  .showcase.reels video{flex:0 0 68%;scroll-snap-align:center;border-radius:18px}
}
.showcase.reels img{display:block;width:100%;height:auto;border-radius:24px;max-height:none}
@media(max-width:620px){.showcase.reels img{flex:0 0 72%;scroll-snap-align:center;border-radius:18px}}
.showcase.reels:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));max-width:66%;margin-inline:auto}
@media(max-width:620px){.showcase.reels:has(>:nth-child(2):last-child){max-width:none}}