/* Pixel&Co shared public system: type, text safety, case navigation and controls. */
:root{
  --pc-type-display:clamp(48px,7.2vw,104px);
  --pc-type-section:clamp(38px,4.8vw,72px);
  --pc-type-subhead:clamp(24px,2.2vw,34px);
  --pc-type-lead:clamp(18px,1.45vw,22px);
  --pc-control-size:44px;
  --pc-control-gap:10px;
  --pc-control-border:rgba(128,128,128,.42);
  --pc-control-bg:rgba(128,128,128,.10);
  --pc-control-accent:#A16CFF;
}

html,body{max-width:100%;overflow-x:clip!important}
body :where(h1,h2,h3,h4,p,li,blockquote,a,button){box-sizing:border-box}
#pc-public nav.nav,#pc-public nav.nav .logo,#pc-public nav.nav .nav-toggle{color:#F5F5F0!important}
#pc-public .case-pager{background:#0A0A0A!important;color:#F5F5F0!important}
main :where(h1,h2,h3){height:auto!important;min-height:0!important;text-wrap:balance;overflow-wrap:normal}
main :where(p,li,blockquote,.lead,.intro,.hero-subhead){height:auto!important;min-height:0!important;text-wrap:pretty}

/* Every page uses the same role-based scale. Page-specific composition may vary. */
#pc-public :is(.hero,.masthead,.m-hero,.l-hero,.e-hero) h1{
  width:auto!important;
  max-width:min(100%,14ch)!important;
  min-height:0!important;
  font-size:var(--pc-type-display)!important;
  line-height:1.03!important;
  letter-spacing:-.045em!important;
  white-space:normal!important;
}
#pc-public section h2{
  width:auto!important;
  max-width:min(100%,22ch)!important;
  min-height:0!important;
  font-size:var(--pc-type-section)!important;
  line-height:1.08!important;
  letter-spacing:-.04em!important;
  white-space:normal!important;
}

/* Gradient text needs real ink room below the baseline. The negative margin
   preserves the composition while preventing g, j, p, q and y from clipping. */
#pc-public main :is(h1,h2,h3,.h2) :is(.grad,.accent,[data-te-color='grad']),
#pc-public main :is(h1,h2,h3,.h2):is(.grad,.accent){
  padding:.04em .07em .18em!important;
  margin:-.04em -.07em -.18em!important;
  -webkit-box-decoration-break:clone!important;
  box-decoration-break:clone!important;
}

/* The saved edit makes these headings bold after first paint. Ship that
   intended weight in CSS so typography is stable from the first frame. */
#pc-public :is(.e-prob,.e-plan,.e-out,.e-sets,.e-res,.e-frame,.e-cta) h2{
  font-weight:700!important;
}

/* Immediate hero art while the image-slot component is being defined. */
#pc-public #lidl-e-hero{
  background:#050505 url('assets/public-media/747cd79caeb606bc.webp') 64% 54%/40% auto no-repeat!important;
}
#pc-public .l-hero .lead{
  max-width:43ch!important;
}
#pc-public #elx-e-hero{
  background:#e9e7e2 url('assets/public-media/2d1bcd4ada1e16fd.webp') 74% 50%/cover no-repeat!important;
}
#pc-public section h3{
  min-height:0!important;
  font-size:var(--pc-type-subhead)!important;
  line-height:1.12!important;
  letter-spacing:-.025em!important;
}
#pc-public :is(.lead,.intro,.hero-subhead,.m-res-lead,.m-prob-body,.e-row-stack){
  min-height:0!important;
  font-size:var(--pc-type-lead)!important;
  line-height:1.5!important;
}

/* Stored editor geometry is not public layout. Copy and intentional color remain. */
[data-tid]{min-height:0!important;height:auto!important}

/* One case-study navigation pattern. */
.case-pager-inner{max-width:1600px!important}
.case-pager a,.case-next-home{
  font-family:'Helvetica World','Helvetica Neue',Helvetica,Arial,sans-serif!important;
  font-size:11px!important;
  line-height:1.4!important;
  font-weight:500!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
}
.case-pager a:hover,.case-next-home:hover{text-decoration:underline!important;text-underline-offset:5px}
.case-next{padding:clamp(56px,7vw,92px) clamp(20px,4vw,56px)!important}
.case-next-inner{max-width:1600px!important}
#pc-public .case-next h2{font-size:clamp(30px,3vw,42px)!important;max-width:none!important}
.case-next-home{display:inline-flex;align-items:center;gap:10px;color:#d0cfca!important}
.case-next-home::before{content:'←';font-size:15px;letter-spacing:0}
.case-next-card{min-width:0!important}
.case-next-card strong{font-size:clamp(22px,2vw,30px)!important;line-height:1.15!important}

/* Shared carousel and gallery controller language. */
.pc-control-bar{display:flex!important;align-items:center!important;gap:var(--pc-control-gap)!important;min-width:0}
.pc-control-arrow{
  appearance:none!important;
  width:var(--pc-control-size)!important;
  height:var(--pc-control-size)!important;
  min-width:var(--pc-control-size)!important;
  min-height:var(--pc-control-size)!important;
  padding:0!important;
  display:inline-grid!important;
  place-items:center!important;
  border:1px solid var(--pc-control-border)!important;
  border-radius:50%!important;
  background:var(--pc-control-bg)!important;
  color:inherit!important;
  font:500 18px/1 'Helvetica World','Helvetica Neue',Helvetica,Arial,sans-serif!important;
  letter-spacing:0!important;
  cursor:pointer!important;
  transition:border-color 180ms ease,color 180ms ease,transform 180ms ease,background 180ms ease!important;
}
.pc-control-arrow:hover{border-color:var(--pc-control-accent)!important;color:var(--pc-control-accent)!important;transform:translateY(-2px)}
.pc-control-arrow:focus-visible,.pc-control-pause:focus-visible,.pc-control-dot:focus-visible{outline:2px solid var(--pc-control-accent)!important;outline-offset:3px!important}
.pc-control-pause{
  appearance:none!important;
  min-height:var(--pc-control-size)!important;
  padding:0 16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  border:1px solid var(--pc-control-border)!important;
  border-radius:999px!important;
  background:var(--pc-control-bg)!important;
  color:inherit!important;
  font:500 10px/1 'Helvetica World','Helvetica Neue',Helvetica,Arial,sans-serif!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
}
.pc-control-pause:hover{border-color:var(--pc-control-accent)!important;color:var(--pc-control-accent)!important}
.pc-control-dots{display:flex!important;align-items:center!important;gap:10px!important}
.pc-control-dot{
  appearance:none!important;
  width:9px!important;
  height:9px!important;
  min-width:9px!important;
  min-height:9px!important;
  padding:0!important;
  border:1px solid currentColor!important;
  border-radius:50%!important;
  background:transparent!important;
  opacity:.45!important;
  font-size:0!important;
  color:inherit!important;
  cursor:pointer!important;
}
.pc-control-dot:is(.is-on,[aria-selected='true']){background:currentColor!important;opacity:1!important;transform:scale(1.2)}
.pc-control-tab:focus-visible{outline:2px solid var(--pc-control-accent)!important;outline-offset:3px!important}
.pc-control-tab[aria-selected='true'],.pc-control-tab.is-on{--pc-tab-active:var(--pc-control-accent)}

/* Services section rail uses the same dot proportions without covering CTAs. */
#pc-public .dotnav .dd{width:9px!important;height:9px!important;border:1px solid currentColor!important;background:transparent!important;opacity:.55}
#pc-public .dotnav a.on .dd{background:linear-gradient(135deg,#ED51AF,#A16CFF 55%,#5FB1EA)!important;border-color:transparent!important;opacity:1;transform:scale(1.2)!important}
#pc-public .dotnav a.on .dl{opacity:0!important;transform:translateX(6px)!important}
#pc-public .dotnav a:hover .dl,#pc-public .dotnav a:focus-visible .dl{opacity:1!important;transform:none!important}

@media(max-width:1100px){
  :root{--pc-type-display:clamp(46px,8.2vw,84px);--pc-type-section:clamp(36px,6vw,64px)}
}
@media(max-width:600px){
  :root{--pc-type-display:clamp(42px,11.5vw,52px);--pc-type-section:clamp(32px,8.7vw,40px);--pc-type-subhead:clamp(22px,6.4vw,28px);--pc-type-lead:clamp(17px,4.8vw,20px)}
  main :where(h1,h2,h3,h4,p,li,blockquote,.lead,.intro,.hero-subhead,[data-tid]){
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    white-space:normal!important;
    transform:none!important;
  }
  :where(.m-goal,.m-before,.m-proof-txt,.e-rows,.e-scope,.outcome-list,.sw-grid){min-width:0!important;max-width:100%!important}
  .case-pager-inner{align-items:stretch!important}
  .case-pager a{width:100%;justify-content:space-between!important;text-align:left!important}
  .case-next-top{gap:16px!important}
  .case-next-card{padding:22px!important}
  .pc-control-bar{flex-wrap:wrap!important}
  .pc-control-arrow{--pc-control-size:42px}
  #pc-public .dotnav{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  .pc-control-arrow,.pc-control-pause,.pc-control-dot{transition:none!important}
}