/* Independent layers: the hit target stays still while its contents move. */
.magnetic-card { perspective: 1100px; transform: none !important; isolation: auto; border: 0; outline: none; box-shadow: none; }
.magnetic-card:hover { border: 0; outline: none; box-shadow: none; }
.magnetic-card:focus-visible { outline: 2px solid #fff; outline-offset: 8px; box-shadow: none; }
.service-surface { position: absolute; inset: 0; transform-style: preserve-3d; border-radius: 8px; }
.magnetic-card .service-bg { transform: translateZ(0); border: 0; }
.magnetic-card .service-bg img { filter: blur(3px) saturate(.85); opacity: .65; transform: scale(1.08); }
.magnetic-card .service-bg:after { background: linear-gradient(180deg, #080d0f08 15%, #080d0f44 45%, #080d0fe8 74%, #080d0f 100%); }
.magnetic-card.branding .service-bg { background: #77264f; }
.magnetic-card.packaging .service-bg { background: #b46a19; }
.magnetic-card.advertising .service-bg { background: #081b42; }
.magnetic-card.advertising .service-bg img { object-position: 52% 35%; filter: blur(.5px); opacity: .9; }
.magnetic-card .service-art,
.magnetic-card.packaging .service-art,
.magnetic-card.advertising .service-art { left: 24px; right: 24px; width: auto; top: -44px; height: 70%; transform: translateZ(48px); transition: none; filter: drop-shadow(0 16px 10px #0004); }
.magnetic-card .service-art .service-product { object-fit: contain; overflow: visible; }
.magnetic-card.packaging .service-art { top: -32px; height: 67%; }
.magnetic-card.advertising .service-art { top: -80px; height: 54%; left: 15%; right: 15%; filter: drop-shadow(2px 4px 0 #111c26) drop-shadow(0 22px 18px #0008); }
.service-shadow { position: absolute; top: 58%; left: 23%; width: 54%; height: 24px; border-radius: 50%; background: #000; filter: blur(14px); opacity: .36; pointer-events: none; }
.advertising .service-shadow { top: 47%; }
.magnetic-card .service-caption { transform: translateZ(24px); pointer-events: none; }
.magnetic-card .service-plus { transform: translateZ(28px); }
.magnetic-card:hover .service-plus { transform: translateZ(28px) rotate(45deg); }
.magnetic-card:focus-visible .service-plus { background: #fff; color: #080d0f; }
@media (max-width: 900px) {
  .service-cards { gap: 104px; }
  .magnetic-card .service-art { top: -40px; height: 68%; }
  .magnetic-card.packaging .service-art { top: -30px; height: 65%; }
  .magnetic-card.advertising .service-art { top: -70px; height: 54%; }
}
@media (prefers-reduced-motion: reduce) {
  .service-surface, .magnetic-card .service-art, .magnetic-card .service-bg img,
  .service-shadow, .magnetic-card .service-plus { transform: none !important; }
}
.motion-quiet .service-surface, .motion-quiet .magnetic-card .service-art,
.motion-quiet .magnetic-card .service-bg img, .motion-quiet .service-shadow { transform: none !important; }

/* Home section links, team link and project index (moved from the retired home-navigation.css). */
.home-section-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:52px}
.home-section-links .small-link{margin:0}
.home-team-link{margin:0 0 70px;padding-inline:var(--gutter)}
.index-list a{display:grid;grid-template-columns:58px minmax(0,1fr);text-align:left;gap:5px 16px;border-top:1px solid var(--line);padding:17px 0;align-items:center;min-width:0;transition:color .2s}
.index-list a[hidden]{display:none}
.index-list a:hover{color:#b1cbff}
.index-list a .n{overflow-wrap:anywhere}
.index-list a img{transition:transform .25s}
.index-list a:hover img{transform:scale(1.045)}
@media(max-width:480px){
 .home-section-links{flex-direction:column;align-items:center;gap:14px;margin-top:38px}
 .home-team-link{margin:0 0 55px}
 .home-section-links .small-link{justify-content:space-between;width:100%;max-width:330px}
}
@media(prefers-reduced-motion:reduce){.index-list a,.index-list a img{transition:none}}

/* Home: clients and key work (2026-11-09). Names are links to each case; figures come from the studio. */
.home-clients{padding:30px var(--gutter) 150px}
.home-clients-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,6vw,110px);align-items:end;max-width:1480px;margin:0 auto 70px}
.home-clients-top h2{font-size:clamp(46px,6.2vw,104px);font-weight:300;line-height:1.02;letter-spacing:-.047em;margin-top:22px}
.home-clients-top>p{font-size:clamp(17px,1.5vw,23px);line-height:1.6;color:#b9c2c6;max-width:580px}
.home-client-list{list-style:none;margin:0 auto;padding:0;max-width:1480px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3.4vw,60px)}
.home-client-list a{display:block;height:100%;padding:24px 0 28px;border-top:1px solid #ffffff2e;color:inherit;text-decoration:none;transition:color .25s}
.home-client-list h3{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:clamp(25px,2.3vw,38px);font-weight:300;letter-spacing:-.035em;line-height:1.15}
.home-client-list h3 i{font-style:normal;font-size:.7em;transition:transform .25s}
.home-client-list span{display:block;margin-top:10px;max-width:400px;font-size:14px;line-height:1.5;color:#a0a8ad}
.home-client-list a:hover{color:#abc7ff}
.home-client-list a:hover i{transform:translate(4px,-4px)}
.home-client-list a:focus-visible{outline:2px solid #c7dafc;outline-offset:4px}
.home-facts{max-width:1480px;margin:60px auto 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,26px)}
.home-facts>div{background:#0f171b;border-radius:20px;padding:26px 26px 30px}
.home-facts dt{font-size:clamp(44px,4.6vw,78px);font-weight:300;letter-spacing:-.05em;line-height:1}
.home-facts dd{margin:16px 0 0;font-size:14px;line-height:1.5;color:#a0a8ad}
@media(max-width:900px){
 .home-clients-top{grid-template-columns:1fr;align-items:start;gap:26px;margin-bottom:44px}
 .home-client-list,.home-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 .home-clients{padding:20px var(--gutter) 85px}
 .home-client-list{grid-template-columns:1fr}
 .home-client-list a{padding:18px 0 20px}
 .home-client-list h3{font-size:27px}
 .home-facts{gap:10px;margin-top:40px}
 .home-facts>div{padding:18px 16px 20px;border-radius:15px}
 .home-facts dt{font-size:42px}
 .home-facts dd{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.home-client-list a,.home-client-list h3 i{transition:none}}