/* Home case studies (#projects equivalent: container ffb5641 + loop grid 97dd03a, card template 301),
 * matched to "Home_page (after freeze version).html" (2026-09-28). Scroll motion: js/atimi-home-case-studies.js.
 * Overrides the IntersectionObserver wipe (Custom Code 331) on this page: the wipe is scroll-scrubbed here. */
body.page-id-94 .elementor-element-ffb5641{padding:64px 0 0!important;background:#02070C!important;gap:0!important}
/* sticky "Case studies" title: pinned H2 top 85 / 88 (<=1024) / 99 (<=980) under the 72px compact header (sticky top minus the 16px lift); */ /* floating over the cards, fades out with the last card */
body.page-id-94 .case-studies-title-sticky{position:sticky!important;top:calc(101px + var(--wp-admin--admin-bar--height,0px))!important;z-index:60!important;height:0!important;margin:0!important;padding:0!important;overflow:visible!important;opacity:var(--case-studies-heading-opacity,1);pointer-events:none}
body.page-id-94 .case-studies-title-sticky .elementor-heading-title{margin:0!important;text-align:center!important;letter-spacing:-.015em!important;transform:translateY(-16px)}
/* cards: full-bleed panels, capped at 1440, square corners, no edge mask (design) */
body.page-id-94 .elementor-element-ffb5641 .elementor-loop-container{gap:0!important;row-gap:0!important}
body.page-id-94 .elementor-element-97dd03a .elementor-loop-container>.e-loop-item{isolation:isolate;max-width:1440px;margin-inline:auto!important;width:100%}
body.page-id-94 .e-loop-item .case-study{border-radius:0!important;margin:0!important;height:100vh!important;min-height:100vh!important}
body.page-id-94 .e-loop-item.is-case-study-inert,body.page-id-94 .e-loop-item[inert]{pointer-events:none!important}
body.page-id-94 .e-loop-item .case-study-visual{-webkit-mask-image:none!important;mask-image:none!important;border-radius:0!important;background-position:50% 54%!important;background-size:cover!important;
  clip-path:inset(var(--case-wipe-top,0%) 0 0 0)!important;transition:none!important;cursor:pointer}
body.page-id-94 .e-loop-item .case-study::before{clip-path:inset(var(--case-wipe-top,0%) 0 0 0)!important;transition:none!important;border-radius:0!important}
/* per-brand backdrop (design .case-study-curtain) behind the photo */
body.page-id-94 .e-loop-item .case-study::before{background:radial-gradient(75% 85% at 28% 50%,rgba(50,192,233,.19),transparent 58%),linear-gradient(105deg,#06141F 0%,#0A2434 58%,#06111A 100%)!important}
body.page-id-94 .e-loop-item .case-study-bestbuy::before{background:radial-gradient(70% 90% at 72% 42%,rgba(255,229,0,.16),transparent 56%),linear-gradient(255deg,#07184A 0%,#092D7B 54%,#061331 100%)!important}
body.page-id-94 .e-loop-item .case-study-kelloggs::before{background:radial-gradient(75% 90% at 26% 48%,rgba(255,190,115,.18),transparent 58%),linear-gradient(105deg,#260710 0%,#59101F 55%,#20050B 100%)!important}
/* scene scale 1.055 -> 1.035 while it reveals */
body.page-id-94 .e-loop-item .case-study-visual{transform:none!important}
body.page-id-94 .e-loop-item .case-study-visual::after{content:none!important}
/* copy block */
body.page-id-94 .e-loop-item .case-study-copy{left:clamp(176px,13vw,208px)!important;right:auto!important;bottom:clamp(34px,5.5vw,88px)!important;width:min(550px,43%)!important;max-width:calc(100% - 60px)!important;gap:0!important;padding:0!important;
  opacity:var(--case-copy-opacity,1)!important;transform:translateY(var(--case-copy-y,0px))!important;transition:none!important}
body.page-id-94 .e-loop-item .case-study-copy>.e-con-inner{gap:0!important;padding:0!important;width:100%!important;max-width:none!important}
body.page-id-94 .e-loop-item .case-study-copy>.e-con-inner>.elementor-widget{margin:0!important;padding:0!important}
body.page-id-94 .e-loop-item .case-study-copy>.e-con-inner>.case-study-logo{height:58px!important;display:flex!important;align-items:center}
body.page-id-94 .e-loop-item .case-study-bestbuy .case-study-copy>.e-con-inner>.case-study-logo{height:62px!important}
body.page-id-94 .e-loop-item .case-study-copy>.e-con-inner>.case-study-logo img{max-height:62px!important;max-width:min(300px,82%)!important;width:auto!important;height:auto!important}
body.page-id-94 .e-loop-item .case-study-copy>.e-con-inner>.elementor-widget-text-editor{margin-top:24px!important;max-width:700px!important}
body.page-id-94 .e-loop-item .case-study-copy>.e-con-inner>.elementor-widget-text-editor,body.page-id-94 .e-loop-item .case-study-copy>.e-con-inner>.elementor-widget-text-editor p{font-size:18px!important;line-height:1.6!important;margin-bottom:0!important}
body.page-id-94 .e-loop-item .case-study-copy .elementor-widget-text-editor p{margin:0!important}
body.page-id-94 .e-loop-item .case-study-copy>.e-con-inner>.case-study-link{margin-top:37px!important} /* 40px ink gap: the button box starts 3px above its text */
@media (max-width:1024px){
  body.page-id-94 .elementor-element-ffb5641{padding-top:56px!important}
  body.page-id-94 .case-studies-title-sticky{top:calc(104px + var(--wp-admin--admin-bar--height,0px))!important}
  body.page-id-94 .e-loop-item .case-study-link .elementor-button{font-size:17px!important}
}
@media (max-width:980px){
  body.page-id-94 .e-loop-item .case-study-copy{left:clamp(128px,14vw,164px)!important;width:min(620px,62%)!important}
  body.page-id-94 .case-studies-title-sticky{top:calc(115px + var(--wp-admin--admin-bar--height,0px))!important}
}
/* <=1024 (touch sizes): each card holds for 40svh of scroll before the next one starts rising, so its
   "Read case study" link is fully visible and tappable. The design has no hold; this is the fix for the rising
   card covering the link. */
@media (max-width:1024px){
  body.page-id-94 .elementor-element-97dd03a .elementor-loop-container>.e-loop-item{--case-hold:40svh;padding-bottom:var(--case-hold)!important;box-sizing:content-box!important;height:auto!important;min-height:0!important}
  body.page-id-94 .elementor-element-97dd03a .elementor-loop-container>.e-loop-item:last-child{--case-hold:0px}
}
@media (max-width:600px){
  /* admin bar scrolls away below 600px, so no offset for it; H2 pins at 86px under the mobile header (design 76 under 78) */
  body.page-id-94 .case-studies-title-sticky{top:102px!important}
}
/* <=700: the design\x27s mobile breakpoint. Cards stack (sticky) as in the design; see the <=1024 hold above. */
@media (max-width:700px){
  body.page-id-94 .elementor-element-ffb5641{padding-top:48px!important}
  body.page-id-94 .e-loop-item .case-study{height:100svh!important;min-height:100svh!important}
  body.page-id-94 .e-loop-item .case-study-copy{left:24px!important;right:24px!important;bottom:28px!important;width:auto!important;max-width:none!important}
  body.page-id-94 .e-loop-item .case-study-copy>.e-con-inner>.elementor-widget-text-editor{margin-top:20px!important}
  body.page-id-94 .e-loop-item .case-study-copy>.e-con-inner>.elementor-widget-text-editor,body.page-id-94 .e-loop-item .case-study-copy>.e-con-inner>.elementor-widget-text-editor p{font-size:17px!important}
  body.page-id-94 .e-loop-item .case-study-copy>.e-con-inner>.case-study-link{margin-top:29px!important}
  body.page-id-94 .e-loop-item .case-study-link .elementor-button{font-size:16px!important}
}

/* side edge fades (design .case-studies-shell::before/::after): card edges dissolve into the #02070C section, min(13vw,180px) each side, 18px max at <=700 */
body.page-id-94 .e-loop-item .case-study-visual{z-index:1!important}
body.page-id-94 .e-loop-item .case-study-copy{z-index:10!important}
/* on the loop item, not the card: the card is overflow:hidden on a half pixel, which left a hairline at its edge */
body.page-id-94 .elementor-element-97dd03a .elementor-loop-container>.e-loop-item::after{content:""!important;display:block!important;position:absolute!important;inset:0 -2px var(--case-hold,0px)!important;z-index:40!important;clip-path:inset(var(--case-wipe-top,0%) 0 0 0);pointer-events:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  --edge:min(13vw,180px);background:linear-gradient(90deg,#02070C 0%,rgba(2,7,12,.92) 30%,rgba(2,7,12,.48) 64%,rgba(2,7,12,0) 100%) left top/var(--edge) 100% no-repeat,linear-gradient(270deg,#02070C 0%,rgba(2,7,12,.92) 30%,rgba(2,7,12,.48) 64%,rgba(2,7,12,0) 100%) right top/var(--edge) 100% no-repeat!important}
@media (max-width:700px){body.page-id-94 .elementor-element-97dd03a .elementor-loop-container>.e-loop-item::after{--edge:min(4vw,18px)}}

/* logo wordmarks render pure white, as in the design (brightness(0) invert(1), .98). The source SVGs are light grey. Best Buy keeps its colour. */
body.page-id-94 .e-loop-item .case-study-copy>.e-con-inner>.case-study-logo img{filter:brightness(0) invert(1)!important;opacity:.98!important}
body.page-id-94 .e-loop-item .case-study-bestbuy .case-study-copy>.e-con-inner>.case-study-logo img{filter:none!important;opacity:1!important}
@media (prefers-reduced-motion:reduce){
  body.page-id-94 .elementor-element-97dd03a .elementor-loop-container>.e-loop-item::after{clip-path:none!important}
  body.page-id-94 .e-loop-item .case-study-visual,body.page-id-94 .e-loop-item .case-study::before{clip-path:none!important}
  body.page-id-94 .e-loop-item .case-study-copy{opacity:1!important;transform:none!important}
}