/* Sport Unplugged — Dark Cinematic
   Archetype: dark-immersive (broadcast execution). Registry: sport-unplugged-v1.
   Zero radius except circular rights markers. No soft drop shadows. */

:root{
  --black:#08090B;
  --panel:#101216;
  --panel-2:#171A20;
  --line:#23262D;
  --fog:#8A9099;
  --fog-2:#AEB4BC;
  --white:#F4F5F6;
  --hot:#FF6A00;

  --font-display:'Anton',Impact,sans-serif;
  --font-body:'Barlow',system-ui,sans-serif;
  --font-cond:'Barlow Condensed',system-ui,sans-serif;

  --gut:clamp(1.25rem,4vw,3.5rem);
  --maxw:1440px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--black);color:var(--white);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------------- nav ---------------- */
.nav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.9rem var(--gut);
  background:rgba(8,9,11,.94);border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(8px);
}
.nav.over{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;
  background:linear-gradient(180deg,rgba(8,9,11,.9),rgba(8,9,11,0))}
.mark{font-family:var(--font-display);font-size:1.0625rem;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap}
.mark span{color:var(--hot)}
.nav nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.nav nav a{
  font-family:var(--font-cond);font-weight:600;font-size:.875rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fog);text-decoration:none;white-space:nowrap;
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.nav nav a:hover{color:var(--hot)}
.nav nav a[aria-current]{color:var(--white);border-bottom-color:var(--hot)}

/* ---------------- shared type ---------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1rem;
  font-family:var(--font-cond);font-weight:600;font-size:.875rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--hot);
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--hot);flex:none}
.display{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  line-height:.88;letter-spacing:.01em;margin:0;
}
h1.display{font-size:clamp(2.5rem,7vw,5.5rem)}
h2.display{font-size:clamp(1.9rem,4.4vw,3.25rem);line-height:.95}
h3.display{font-size:1.25rem;letter-spacing:.02em;line-height:1.1}
.lede{font-size:1.1875rem;color:var(--fog-2);max-width:60ch}
.wrap{max-width:var(--maxw);margin:0 auto}

/* ---------------- hero: stadium scrub ---------------- */
.hero-scroll{height:340vh}
.hero{position:sticky;top:0;height:100vh;overflow:hidden}
/* The night frames are TRANSPARENT, so the page supplies the sky they were
   rendered against — without it a dark stadium on a near-black page vanishes. */
.hero::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 50% 46%, #141A27 0%, #0B0E15 55%, var(--black) 100%)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero .vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 44%,transparent 46%,rgba(8,9,11,.72) 100%)}
.hero-grid{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;
  padding:0 var(--gut) 1.75rem;max-width:var(--maxw);margin:0 auto;width:100%}
.hero-type{align-self:center}
.hero h1{font-size:clamp(3rem,9.5vw,8.5rem)}
.hero h1 .o{color:var(--hot)}
.hero .lede{margin:1.5rem 0 0;max-width:44ch}
.readout{display:flex;align-items:flex-end;gap:2.5rem;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:1rem;
  font-family:var(--font-cond);font-weight:600;font-size:.875rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fog)}
.readout b{display:block;font-family:var(--font-display);font-weight:400;
  font-size:1.75rem;letter-spacing:.02em;color:var(--white)}
.readout .hot b{color:var(--hot)}
.readout .prog{margin-left:auto;width:120px;height:2px;background:var(--line);position:relative}
.readout .prog i{position:absolute;inset:0 auto 0 0;width:0;background:var(--hot)}

/* ---------------- page header (non-home) ---------------- */
.phead{padding:clamp(2.25rem,5vw,3.75rem) var(--gut) 0;max-width:var(--maxw);margin:0 auto}
.crumb{font-family:var(--font-cond);font-weight:600;font-size:.8125rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fog);margin:0 0 1.1rem}
.crumb a{color:var(--fog);text-decoration:none}
.crumb a:hover{color:var(--hot)}
.ptitle{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;
  border-bottom:1px solid var(--line);padding-bottom:1.25rem}
.stats{display:flex;gap:2.25rem;text-align:right;
  font-family:var(--font-cond);font-weight:600;font-size:.8125rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fog)}
.stats b{display:block;font-family:var(--font-display);font-weight:400;
  font-size:1.9rem;letter-spacing:.02em;color:var(--white)}
.stats .hot b{color:var(--hot)}

/* ---------------- sections ---------------- */
.section{padding:clamp(3.25rem,7vw,6rem) var(--gut);max-width:var(--maxw);margin:0 auto}
.section + .section{border-top:1px solid var(--line)}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  margin-bottom:2.25rem;flex-wrap:wrap}
.shead span{font-family:var(--font-cond);font-weight:600;font-size:.875rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fog)}

/* banner image */
.banner{position:relative;border:1px solid var(--line);overflow:hidden;background:var(--panel)}
.banner img{width:100%;height:clamp(220px,32vw,400px);object-fit:cover;object-position:center 35%}
.banner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,11,.15),rgba(8,9,11,.72))}

/* ---------------- offer cards ---------------- */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--panel);padding:clamp(1.4rem,3vw,2.25rem)}
.card > h3{margin:0 0 1.5rem;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.card-media{margin:-.2rem 0 1.5rem;border:1px solid var(--line)}
.card-media img{width:100%;height:clamp(160px,22vw,260px);object-fit:cover}
.groups{display:grid;gap:1.75rem}
@media (min-width:900px){.groups{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.group h4{font-family:var(--font-cond);font-weight:600;font-size:1rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--hot);margin:0 0 .7rem}
.group ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.group li{display:grid;grid-template-columns:1rem 1fr;gap:.6rem;
  font-size:.9375rem;color:var(--fog-2);line-height:1.45}
.group li::before{content:"";width:7px;height:1px;background:var(--hot);margin-top:.72rem}

/* ---------------- narrative (partner pages) ---------------- */
.narrative{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;max-width:68ch}
.narrative h3{font-family:var(--font-cond);font-weight:600;font-size:1.0625rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--hot);margin:1.5rem 0 -.5rem}
.narrative p{margin:0;color:var(--fog-2)}
.narrative p.first{font-size:1.1875rem;color:var(--white)}
.pullquote{margin:0;padding:clamp(1.5rem,3vw,2.25rem);background:var(--panel);
  border-left:3px solid var(--hot)}
.pullquote p{margin:0;font-family:var(--font-display);font-weight:400;
  text-transform:uppercase;font-size:clamp(1.15rem,2.4vw,1.75rem);line-height:1.12;
  letter-spacing:.01em;color:var(--white)}
.pullquote cite{display:block;margin-top:.9rem;font-style:normal;
  font-family:var(--font-cond);font-weight:600;font-size:.8125rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--hot)}

/* ---------------- index grid (section pages) ---------------- */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.tile{background:var(--panel);text-decoration:none;display:grid;
  grid-template-rows:auto 1fr;transition:background .15s}
.tile:hover{background:var(--panel-2)}
.tile .shot{overflow:hidden;border-bottom:1px solid var(--line);background:#0C0E11}
.tile .shot img{width:100%;height:190px;object-fit:cover;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);filter:saturate(.85)}
.tile:hover .shot img{transform:scale(1.04);filter:saturate(1)}
.tile .body{padding:1.15rem 1.25rem 1.4rem}
.tile h3{margin:0 0 .4rem}
.tile p{margin:0;font-size:.9375rem;color:var(--fog);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tile .go{display:inline-flex;align-items:center;gap:.5rem;margin-top:.9rem;
  font-family:var(--font-cond);font-weight:600;font-size:.8125rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--hot)}

/* ---------------- rights plan (the twist) ---------------- */
.plan{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:start}
.stage-wrap{position:relative;border:1px solid var(--line);background:#0C0E11;overflow:hidden}
.stamp{position:absolute;top:0;left:0;z-index:2;background:var(--hot);color:#0A0A0A;
  font-family:var(--font-cond);font-weight:600;font-size:.75rem;letter-spacing:.18em;
  text-transform:uppercase;padding:.35rem .8rem}
.mk{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
  border:1px solid var(--hot);background:rgba(8,9,11,.72);color:var(--hot);
  font-family:var(--font-cond);font-weight:600;font-size:.8125rem;
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .14s,transform .14s,box-shadow .14s}
.mk.on,.mk:hover{background:var(--hot);color:#0A0A0A;
  transform:translate(-50%,-50%) scale(1.18);box-shadow:0 0 0 6px rgba(255,106,0,.18)}
.mk.taken{border-color:var(--line);color:var(--fog)}
.mk.taken.on,.mk.taken:hover{background:var(--fog);color:#0A0A0A;box-shadow:0 0 0 6px rgba(138,144,153,.16)}
.rights{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.right{display:grid;grid-template-columns:2.5rem 1fr auto;gap:.8rem;background:var(--panel);
  padding:1rem 1.1rem;cursor:pointer;align-items:center;transition:background .14s}
.right:hover,.right.on{background:var(--panel-2)}
.right .n{font-family:var(--font-cond);font-weight:600;color:var(--fog);letter-spacing:.1em}
.right h3{font-size:1.0625rem;margin:0}
.right p{margin:.1rem 0 0;font-size:.875rem;color:var(--fog)}
.tag{font-family:var(--font-cond);font-weight:600;font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.25rem .6rem;border:1px solid;white-space:nowrap}
.tag.open{color:var(--hot);border-color:var(--hot)}
.tag.taken{color:var(--fog);border-color:var(--line)}
.note{margin:1.4rem 0 0;font-size:.9375rem;color:var(--fog);
  border-left:2px solid var(--hot);padding-left:1rem}

/* ---------------- contact / footer ---------------- */
.cta{padding:clamp(3rem,7vw,5.5rem) var(--gut);border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,106,0,.06),transparent 55%),var(--black)}
.cta-in{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;
  align-items:flex-end;gap:2rem;flex-wrap:wrap}
.btn{display:inline-block;font-family:var(--font-cond);font-weight:600;font-size:.9375rem;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  padding:.85rem 1.9rem;border:1px solid var(--hot);color:var(--hot);
  transition:background .15s,color .15s}
.btn:hover{background:var(--hot);color:#0A0A0A}
footer{border-top:1px solid var(--line);padding:2rem var(--gut) 2.75rem;color:var(--fog)}
.foot-in{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;font-family:var(--font-cond);font-weight:500;
  font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase}
footer a{color:var(--fog);text-decoration:none}
footer a:hover{color:var(--hot)}

/* ---------------- responsive ---------------- */
@media (max-width:980px){
  .plan{grid-template-columns:1fr}
  .ptitle{grid-template-columns:1fr}
  .stats{text-align:left}
}
@media (max-width:860px){
  .nav{flex-wrap:wrap;gap:.75rem}
  .nav nav{gap:1rem;font-size:.8125rem}
  .hero-scroll{height:260vh}
  .readout{gap:1.5rem}
  .readout .prog{display:none}
  .right{grid-template-columns:2rem 1fr}
  .tag{justify-self:start;margin-top:.35rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tile .shot img{transition:none}
}

/* ============================================================
   BREAK-OUT FIGURES — cutout athletes that overflow their panel.
   This is the move the original site led with; the panel is clipped
   on three sides and open at the top so the figure escapes it.
   ============================================================ */
.breakout{
  position:relative;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:end;
  min-height:clamp(300px,34vw,440px);
  margin-top:clamp(70px,9vw,130px);          /* room for the figure to rise into */
  border:1px solid var(--line);
  background:linear-gradient(100deg,var(--panel) 0%,var(--panel) 52%,#C44A05 52%,#FF6A00 100%);
}
.breakout::after{                             /* the hot edge the figure crosses */
  content:"";position:absolute;left:52%;top:0;bottom:0;width:1px;background:var(--hot);opacity:.5;
}
.breakout .bo-copy{padding:clamp(1.5rem,3.2vw,2.75rem);align-self:center;position:relative;z-index:2}
.breakout .bo-copy h2,.breakout .bo-copy h3{margin:0 0 .75rem}
.breakout .bo-copy p{margin:0;color:var(--fog-2);max-width:40ch}
.breakout .bo-fig{position:relative;align-self:end;justify-self:center;width:100%;height:100%}
.breakout .bo-fig img{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:auto;max-width:none;
  height:calc(100% + clamp(60px,8vw,118px));   /* <- the overflow */
  object-fit:contain;object-position:bottom center;
  will-change:transform;
}
.breakout.flip{grid-template-columns:.95fr 1.05fr}
.breakout.flip .bo-copy{order:2}
.breakout.flip .bo-fig{order:1}
.breakout.flip{background:linear-gradient(260deg,var(--panel) 0%,var(--panel) 52%,#C44A05 52%,#FF6A00 100%)}
.breakout.flip::after{left:auto;right:52%}

/* ---------------- photo gallery strip ---------------- */
.gallery{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.gallery figure{margin:0;background:var(--panel);overflow:hidden}
.gallery img{width:100%;height:clamp(150px,16vw,220px);object-fit:cover;
  filter:saturate(.8) contrast(1.05);transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .3s}
.gallery figure:hover img{transform:scale(1.05);filter:saturate(1.05) contrast(1)}

/* ---------------- logo wall ---------------- */
.logos{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.logos a,.logos span{display:grid;place-items:center;background:var(--panel);
  padding:1.5rem 1rem;min-height:110px;transition:background .15s}
.logos a:hover{background:var(--panel-2)}
.logos img{max-height:54px;width:auto;object-fit:contain;
  filter:grayscale(1) brightness(1.7) contrast(.85);opacity:.72;
  transition:filter .25s,opacity .25s,transform .25s}
.logos a:hover img{filter:none;opacity:1;transform:scale(1.04)}

/* ============================================================
   MOTION — deliberate, not a blanket fade-in on everything.
   ============================================================ */

/* broadcast wipe on section headings */
/* Gated on .js-motion (added by su.js). Without JS nothing is ever hidden. */
.js-motion .wipe{clip-path:inset(0 100% 0 0);transition:clip-path .62s cubic-bezier(.16,.84,.3,1)}
.js-motion .wipe.in{clip-path:inset(0 0 0 0)}

/* rules draw themselves out from the left */
.js-motion .rule-draw{transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.16,.84,.3,1)}
.js-motion .rule-draw.in{transform:scaleX(1)}

/* cards/tiles rise once, staggered — short distance, no long fades */
.js-motion .rise{opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.16,.84,.3,1)}
.js-motion .rise.in{opacity:1;transform:none}

/* rights markers pop in, staggered, when the plan enters */
.js-motion .mk{opacity:0;transform:translate(-50%,-50%) scale(.6);
  transition:opacity .3s ease,transform .36s cubic-bezier(.3,1.5,.5,1),
             background .14s,box-shadow .14s}
.js-motion .mk.seen{opacity:1;transform:translate(-50%,-50%) scale(1)}
.js-motion .mk.seen.on,.js-motion .mk.seen:hover{transform:translate(-50%,-50%) scale(1.18)}

/* nav condenses once you leave the hero */
.nav{transition:padding .25s ease,background .25s ease}
.nav.tight{padding-top:.55rem;padding-bottom:.55rem;background:rgba(8,9,11,.96)}

/* the hot line under the eyebrow extends on entry */
.js-motion .eyebrow::before{transition:width .5s cubic-bezier(.16,.84,.3,1)}
.js-motion .eyebrow:not(.in)::before{width:0}

@media (prefers-reduced-motion:reduce){
  .wipe,.rule-draw,.rise,.mk{transition:none !important}
  .wipe{clip-path:none}
  .rule-draw{transform:none}
  .rise{opacity:1;transform:none}
  .mk{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .eyebrow::before{width:34px}
  .breakout .bo-fig img{transform:translateX(-50%) !important}
}
@media (max-width:860px){
  .breakout{grid-template-columns:1fr;margin-top:clamp(56px,16vw,90px);
    background:linear-gradient(170deg,var(--panel) 0%,var(--panel) 58%,#C44A05 58%,#FF6A00 100%)}
  .breakout::after{display:none}
  .breakout.flip{grid-template-columns:1fr}
  .breakout.flip .bo-copy{order:1}
  .breakout.flip .bo-fig{order:2}
  .breakout .bo-fig{min-height:240px}
  .breakout .bo-fig img{height:calc(100% + 56px)}
}

/* ============================================================
   CLIENT CARDS — rebuilt from the Webflow original: the partner's
   mark sits on a band; the benefit row is hidden until hover/focus.
   The whole card is one link, so it is clickable and keyboard-reachable.
   ============================================================ */
.clients{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.client{
  position:relative;display:block;text-decoration:none;background:var(--panel);
  min-height:184px;overflow:hidden;isolation:isolate;
}
.client:focus-visible{outline:2px solid var(--hot);outline-offset:-2px}

/* the partner's own photograph, full bleed -- these are pictures of the
   business (an aircraft, a coach, a stadium, a hotel), not logos */
.client .mark-shot{
  position:absolute;inset:0;display:block;
  transition:opacity .3s ease,transform .5s cubic-bezier(.2,.7,.3,1),filter .3s ease;
}
.client .mark-shot img{
  width:100%;height:100%;object-fit:cover;max-width:none;max-height:none;
  filter:saturate(.72) contrast(1.05) brightness(.78);transition:inherit;
}
.client .mark-shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,11,.18),rgba(8,9,11,.82));
  transition:background .3s ease;
}
.client:hover .mark-shot img,.client:focus-visible .mark-shot img{
  transform:scale(1.06);filter:saturate(.35) contrast(1) brightness(.4);
}
.client:hover .mark-shot::after,.client:focus-visible .mark-shot::after{
  background:linear-gradient(180deg,rgba(8,9,11,.74),rgba(8,9,11,.9));
}

/* the name always reads */
.client .cname{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:.7rem 1rem;
  font-family:var(--font-cond);font-weight:600;font-size:.8125rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fog);
  border-top:1px solid var(--line);background:rgba(8,9,11,.72);
  display:flex;justify-content:space-between;align-items:center;gap:.75rem;
  transition:color .2s,border-color .2s,background .2s;
}
.client .cname .go{color:var(--hot);opacity:0;transform:translateX(-6px);
  transition:opacity .22s,transform .28s cubic-bezier(.2,.7,.3,1)}
.client:hover .cname,.client:focus-visible .cname{
  color:var(--white);border-top-color:var(--hot);background:rgba(8,9,11,.9)}
.client:hover .cname .go,.client:focus-visible .cname .go{opacity:1;transform:none}

/* the benefit row — hidden until hover, exactly as Webflow had it */
.client .benefits{
  position:absolute;inset:0;bottom:2.6rem;z-index:2;
  display:grid;grid-template-columns:repeat(3,1fr);align-content:center;gap:.5rem;
  padding:1rem .9rem;opacity:0;pointer-events:none;
  transition:opacity .26s ease;
}
.client:hover .benefits,.client:focus-visible .benefits{opacity:1}
.client .benefit{display:grid;justify-items:center;gap:.5rem;text-align:center;
  transform:translateY(12px);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.client:hover .benefit,.client:focus-visible .benefit{transform:none}
.client:hover .benefit:nth-child(2),.client:focus-visible .benefit:nth-child(2){transition-delay:.05s}
.client:hover .benefit:nth-child(3),.client:focus-visible .benefit:nth-child(3){transition-delay:.1s}
/* Extruded in Blender and already brand-orange -- no recolour filter,
   it would flatten the shading that makes them read as dimensional. */
.client .ico{position:relative;width:46px;height:46px;display:block}
.client .ico img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.55));
  transition:transform .32s cubic-bezier(.2,.7,.3,1),filter .32s}
.client:hover .ico img,.client:focus-visible .ico img{
  transform:translateY(-3px) scale(1.04);filter:drop-shadow(0 7px 11px rgba(0,0,0,.6))}

/* 24-frame spin strip, layered OVER the still. The url lives in a custom
   property and is only consumed inside :hover, so the 59KB sprite is not
   fetched until someone actually hovers; the still underneath covers the gap. */
.client .ico .spin{position:absolute;inset:0;opacity:0;
  background-repeat:no-repeat;background-size:2400% 100%;background-position:0 0;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));transition:opacity .12s ease}
.client:hover .ico .spin,.client:focus-visible .ico .spin{
  background-image:var(--spin);opacity:1;
  transform:translateY(-3px) scale(1.04);
  animation:su-spin 1.15s steps(24) infinite}
.client:hover .ico img,.client:focus-visible .ico img{opacity:0;transition:opacity .12s ease}
@keyframes su-spin{to{background-position:100% 0}}

@media (prefers-reduced-motion:reduce){
  .client .ico .spin{display:none}
  .client:hover .ico img,.client:focus-visible .ico img{opacity:1;transform:none}
}
.client .benefit span{font-family:var(--font-cond);font-weight:600;font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fog-2);line-height:1.25}

/* touch: no hover, so show the benefits and skip the swap */
@media (hover:none){
  .client .mark-shot img{filter:saturate(.4) contrast(1) brightness(.42)}
  .client .mark-shot::after{background:linear-gradient(180deg,rgba(8,9,11,.7),rgba(8,9,11,.9))}
  .client .benefits{opacity:1}
  .client .benefit{transform:none}
  .client .cname .go{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .client .mark-shot,.client .benefit,.client .cname .go{transition:none}
}