/* ==========================================================================
   CASE STUDIES LANDING (page 852)
   Ported from Case_studies_landingpage.html. Hero + the non-sticky variant
   of the shared case-study cards. Every selector is scoped to
   .case-landing-hero or .case-studies-landing-projects.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
/* Hero is built from native Elementor widgets so the image is swappable in the
   UI (select the image widget inside 'case-landing-hero-media'). Do not put the
   hero image back into an HTML widget or a hardcoded background-image. */
.case-landing-hero{position:relative;min-height:820px;height:min(820px,100svh);overflow:hidden;background:#02090f;isolation:isolate}
.page-id-852 .case-landing-hero{display:block!important;width:100%!important;max-width:none!important;padding:0!important;margin:0!important;gap:0!important}
.page-id-852 .case-landing-hero-media{display:block!important;position:absolute!important;inset:0!important;z-index:0;overflow:hidden;background:#02090f;width:100%!important;max-width:none!important;height:100%!important;padding:0!important;margin:0!important;gap:0!important}
.page-id-852 .case-landing-hero-image{position:absolute!important;inset:0;width:100%!important;height:100%!important;margin:0!important;padding:0!important}
.page-id-852 .case-landing-hero-image .elementor-widget-container{height:100%}
.page-id-852 .case-landing-hero-media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.case-landing-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(2,9,15,.92) 0%,rgba(2,9,15,.78) 28%,rgba(2,9,15,.48) 52%,rgba(2,9,15,.14) 78%,rgba(2,9,15,.06) 100%),linear-gradient(180deg,rgba(2,9,15,.30) 0%,rgba(2,9,15,.02) 36%,rgba(2,9,15,.12) 68%,rgba(2,9,15,.55) 100%)}
.case-landing-hero::after{content:"";position:absolute;inset:76% 0 0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(2,9,15,.5));opacity:.45}
.page-id-852 .case-landing-hero-shell{position:relative;z-index:2;display:flex!important;flex-direction:row!important;align-items:center!important;width:min(1280px,calc(100% - 160px))!important;max-width:none!important;height:100%!important;margin:0 auto!important;padding:290px 0 242px!important;gap:0!important}
.page-id-852 .case-landing-hero-copy{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;width:100%!important;max-width:680px!important;padding:0!important;margin:0!important;gap:26.7px!important}
.page-id-852 .case-landing-hero-copy > .elementor-widget{width:100%;margin:0;opacity:0;animation:caseLandingHeroCopyReveal 1.05s cubic-bezier(.22,1,.36,1) both;will-change:opacity,transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.page-id-852 .case-landing-hero-copy > .elementor-widget:nth-child(1){animation-delay:.10s}
.page-id-852 .case-landing-hero-copy > .elementor-widget:nth-child(2){animation-delay:.22s}
.case-landing-hero h1{margin:0;color:#fff;font-family:var(--font-heading,'Poppins',sans-serif);font-size:80px;font-weight:500;line-height:1.06;letter-spacing:-1.2px;text-shadow:0 2px 28px rgba(0,0,0,.42)}
.page-id-852 .case-landing-hero-intro{max-width:381px}
.case-landing-hero-intro p{margin:0;color:#aecbde;font-family:var(--font-body,'Inter',sans-serif);font-size:18px;font-weight:400;line-height:1.6;text-shadow:0 2px 28px rgba(0,0,0,.42)}
@keyframes caseLandingHeroCopyReveal{0%{opacity:0;transform:translate3d(0,9px,0)}68%{opacity:.94}100%{opacity:1;transform:translate3d(0,0,0)}}

/* --- Projects: non-sticky card stack ------------------------------------- */
.case-studies-landing-projects{position:relative;z-index:2;padding:64px 0 0;background:#02070c;overflow:hidden}
.case-studies-landing-shell{width:min(1280px,calc(100% - 160px));margin-inline:auto}

/* style.css sizes the card for the homepage's 100vh sticky parent
   (height:100%!important, 1440px cap). Both have to be undone here. */
.case-studies-landing-projects .case-study{height:auto!important;min-height:760px;width:100%!important;max-width:none!important;margin:0 0 64px!important}
.case-studies-landing-projects .case-study:last-child{margin-bottom:0!important}
.case-studies-landing-projects .case-study-copy{left:86px!important;right:auto!important;bottom:88px!important;width:550px!important;max-width:calc(100% - 60px)!important}
/* 2026-09-28: Kellogg's right-aligned copy removed (copy on the left on every card) */
.case-studies-landing-projects .case-study-summary{max-width:700px}

/* Square corners at desktop. The wipe's clip-path carries the radius in
   style.css with !important, so the inset states are re-declared with
   round 0 or the image reveals rounded inside a square card. Below 821px
   the design returns to 28px, which the base clamp already gives. */
@media (min-width:821px){
  .case-studies-landing-projects .case-study,
  .case-studies-landing-projects .case-study-visual{border-radius:0!important}
  .case-studies-landing-projects .case-study-visual{clip-path:inset(99.9% 0 0 0 round 0)!important}
  .case-studies-landing-projects .case-study[data-direction="from-top"] .case-study-visual{clip-path:inset(0 0 99.9% 0 round 0)!important}
  .case-studies-landing-projects .case-study[data-direction="from-bottom"] .case-study-visual{clip-path:inset(99.9% 0 0 0 round 0)!important}
  .case-studies-landing-projects .case-study.is-visible .case-study-visual{clip-path:inset(0 0 0 0 round 0)!important}
  .case-studies-landing-projects .case-study::before{clip-path:inset(99.9% 0 0 0 round 0)}
  .case-studies-landing-projects .case-study[data-direction="from-top"]::before{clip-path:inset(0 0 99.9% 0 round 0)}
  .case-studies-landing-projects .case-study[data-direction="from-bottom"]::before{clip-path:inset(99.9% 0 0 0 round 0)}
  .case-studies-landing-projects .case-study.is-visible::before{clip-path:inset(0 0 0 0 round 0)}
}

@media (max-width:1439px){
  .case-landing-hero-shell,
  .case-studies-landing-shell{width:min(1280px,calc(100% - 96px))}
}
@media (max-width:820px){
  .case-landing-hero{min-height:760px;height:auto}
  .case-landing-hero-shell{width:calc(100% - 48px);min-height:760px;padding:220px 0 150px;align-items:center}
  .case-landing-hero h1{font-size:var(--type-hero)}
  .case-studies-landing-projects{padding:48px 0 0}
  .case-studies-landing-shell{width:calc(100% - 48px)}
  .case-studies-landing-projects .case-study{min-height:760px;margin-bottom:24px!important}
  .case-studies-landing-projects .case-study-copy,
  .case-studies-landing-projects .case-study-kelloggs .case-study-copy{left:24px!important;right:24px!important;bottom:28px!important;width:auto!important;max-width:none!important}
}
@media (max-width:520px){
  .case-landing-hero-shell{width:calc(100% - 32px);padding:190px 0 110px}
  .case-landing-hero h1{font-size:var(--type-hero);line-height:1.05}
  .case-landing-hero-intro{font-size:17px}
  .case-studies-landing-shell{width:calc(100% - 32px)}
}
@media (prefers-reduced-motion:reduce){
  .case-landing-hero-copy > h1,
  .case-landing-hero-copy > p{opacity:1!important;transform:none!important;animation:none!important;will-change:auto}
}
/* 2026-09-28 hero responsive fix (Ron: "cramped" on mobile).
   The desktop rule `.page-id-852 .case-landing-hero-shell{width:min(1280px,calc(100% - 160px))!important;padding:290px 0 242px!important}`
   out-specified the responsive rules above, so the 80px gutter and 290/242 padding applied at every width
   (h1 at x=80 and 215px wide on a 390 phone). Re-stated with matching specificity. Gutters follow the header
   frame (design system 7.3): 48px at <=1439, 24px at <=760. Mobile type matches the other page heroes. */
@media (max-width:1439px){
  .page-id-852 .case-landing-hero-shell{width:min(1280px,calc(100% - 96px))!important}
}
@media (max-width:820px){
  .page-id-852 .case-landing-hero{min-height:720px!important}
  .page-id-852 .case-landing-hero-shell{min-height:720px;padding:200px 0 120px!important}
}
@media (max-width:760px){
  .page-id-852 .case-landing-hero-shell{width:calc(100% - 48px)!important}
}
@media (max-width:700px){
  .page-id-852 .case-landing-hero{min-height:640px!important}
  .page-id-852 .case-landing-hero-shell{min-height:640px;padding:170px 0 96px!important}
  .page-id-852 .case-landing-hero h1{line-height:1.06;letter-spacing:-.72px}
  .page-id-852 .case-landing-hero-intro{max-width:none!important}
  .page-id-852 .case-landing-hero-intro p{font-size:17px}
}

/* 2026-10-01: case study logos match the homepage (copied from home-case-studies.css, page-id-94 -> 852).
   Wordmarks render pure white; Best Buy keeps its colour. */
body.page-id-852 .e-loop-item .case-study-copy>.e-con-inner>.case-study-logo{height:58px!important;display:flex!important;align-items:center}
body.page-id-852 .e-loop-item .case-study-bestbuy .case-study-copy>.e-con-inner>.case-study-logo{height:62px!important}
body.page-id-852 .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-852 .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-852 .e-loop-item .case-study-bestbuy .case-study-copy>.e-con-inner>.case-study-logo img{filter:none!important;opacity:1!important}

/* ==========================================================================
   2026-10-09: card stack behaves like Home (DWR-457, DWR-511, DWR-510).
   852 shows loop item 301 (sticky, 100vh), but only the IntersectionObserver
   wipe (Custom Code 331) ran here, so the incoming card snapped to full
   height at 15% visibility and covered the current card's "Read case study"
   link. js/atimi-home-case-studies.js now runs on 852 too and drives the wipe
   from scroll position; these rules hand the clip-path and copy state to it.
   Corners stay as they were on this page (round clamp(28px,3.4vw,54px)).
   Copy spacing matches Home: logo > summary 24, summary > CTA 40px ink gap
   (20 / 32 at <=700). Card position and width are unchanged.
   ========================================================================== */
body.page-id-852 .elementor-element-6d0e1f09 .elementor-loop-container{gap:0!important;row-gap:0!important}
body.page-id-852 .e-loop-item.is-case-study-inert,body.page-id-852 .e-loop-item[inert]{pointer-events:none!important}
body.page-id-852 .e-loop-item .case-study-visual{clip-path:inset(var(--case-wipe-top,0%) 0 0 0 round clamp(28px,3.4vw,54px))!important;transition:none!important}
body.page-id-852 .e-loop-item .case-study::before{clip-path:inset(var(--case-wipe-top,0%) 0 0 0 round clamp(28px,3.4vw,54px))!important;transition:none!important}
body.page-id-852 .e-loop-item .case-study-copy{gap:0!important;opacity:var(--case-copy-opacity,1)!important;transform:translateY(var(--case-copy-y,0px))!important;transition:none!important}
body.page-id-852 .e-loop-item .case-study-copy>.e-con-inner{gap:0!important}
body.page-id-852 .e-loop-item .case-study-copy>.e-con-inner>.elementor-widget{margin:0!important;padding:0!important}
body.page-id-852 .e-loop-item .case-study-copy>.e-con-inner>.elementor-widget-text-editor{margin-top:24px!important}
body.page-id-852 .e-loop-item .case-study-copy .elementor-widget-text-editor p{margin:0!important}
body.page-id-852 .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-852 .elementor-element-6d0e1f09 .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-852 .elementor-element-6d0e1f09 .elementor-loop-container>.e-loop-item:last-child{--case-hold:0px}
  body.page-id-852 .e-loop-item .case-study-link .elementor-button{font-size:17px!important}
}
@media (max-width:700px){
  body.page-id-852 .e-loop-item .case-study-copy>.e-con-inner>.elementor-widget-text-editor{margin-top:20px!important}
  body.page-id-852 .e-loop-item .case-study-copy>.e-con-inner>.elementor-widget-text-editor,body.page-id-852 .e-loop-item .case-study-copy>.e-con-inner>.elementor-widget-text-editor p{font-size:17px!important}
  body.page-id-852 .e-loop-item .case-study-copy>.e-con-inner>.case-study-link{margin-top:29px!important}
  body.page-id-852 .e-loop-item .case-study-link .elementor-button{font-size:16px!important}
}
@media (prefers-reduced-motion:reduce){
  body.page-id-852 .e-loop-item .case-study-visual,body.page-id-852 .e-loop-item .case-study::before{clip-path:inset(0 round clamp(28px,3.4vw,54px))!important}
  body.page-id-852 .e-loop-item .case-study-copy{opacity:1!important;transform:none!important}
}