/* Etpaar Creative case-study staging. Loaded after pages.css. */

#proj .proj-hero{
  padding-top:clamp(168px,22vh,244px);
  padding-bottom:clamp(44px,7vh,82px);
}

#proj .proj-hero h1{
  max-width:12ch;
  font-size:clamp(3.35rem,9.4vw,7.5rem);
  line-height:.91;
  letter-spacing:-.045em;
  text-wrap:balance;
}

#proj .proj-hero .ptag{
  margin-top:clamp(22px,3vh,34px);
  font-size:clamp(1.55rem,3.5vw,2.7rem);
}

#proj .proj-hero .chips{
  margin-top:clamp(26px,3.5vh,40px);
}

#proj .proj-hero .pxedition{
  margin-top:clamp(34px,5vh,58px);
}

#proj .proj-banner{
  max-width:1580px;
  margin-top:0;
  margin-bottom:clamp(92px,15vh,184px);
  padding-inline:clamp(16px,3vw,44px);
}

#proj .proj-banner .project-cinematic-image{
  border-radius:clamp(6px,1vw,12px);
  box-shadow:0 46px 90px -48px rgba(60,30,10,.52);
}

#proj .proj-sec{
  padding-top:clamp(86px,13vh,162px);
  padding-bottom:clamp(86px,13vh,162px);
}

#proj .proj-sec + .proj-sec{
  border-top:1px solid rgba(20,18,31,.07);
}

#proj .proj-sec .sechead{
  margin-bottom:clamp(38px,6vh,72px);
  padding-bottom:16px;
}

#proj .pxcols{
  gap:clamp(42px,8vw,112px);
}

#proj .pxquote{
  font-size:clamp(1.8rem,3.4vw,2.75rem);
  margin-bottom:clamp(30px,5vh,52px);
}

#proj .pxprose .lede{
  font-size:clamp(1.1rem,1.5vw,1.25rem);
  line-height:1.68;
}

#proj .pxpal{
  gap:clamp(20px,2.6vw,36px);
}

/* Larger plates make the work read as individual moments, not thumbnails. */
#proj .pxgal{
  columns:2 430px;
  column-gap:clamp(20px,2.6vw,38px);
}

#proj .pxgal figure,
#proj .pxgal figure.project-plate{
  margin:0 0 clamp(58px,8vw,112px);
  overflow:visible;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  box-shadow:none;
}

/* Asymmetry: a few landscape plates (marked .pxwide by the template, at a
   deliberately varied cadence) break the two columns and run full width as
   cinematic bands. They keep their NATIVE proportions — the fixed 16:9/21:9
   aspect-ratio + object-fit:cover frames this replaced cut real artwork off
   the wide plates ("figure 14 is cut off"). Nothing in the gallery is cropped:
   the image's own ratio sets every frame. */
#proj .pxgal figure.pxwide{
  column-span:all;
  margin-top:clamp(6px,1vw,16px);
}

/* Uneven two-column texture: between the wide bands some plates step down
   from full column width and hug one edge, so the columns never read as an
   even grid. Widths only — proportions are never touched. */
#proj .pxgal figure:nth-child(5n+2):not(.pxwide){
  width:86%;
  margin-left:auto;
}
#proj .pxgal figure:nth-child(5n+4):not(.pxwide){
  width:90%;
}

#proj .pxgal figure.project-plate:hover{
  transform:none;
  box-shadow:none;
}

#proj .pxgal picture,
#proj .pxgal .project-cinematic-image{
  display:block;
  overflow:hidden;
  border-radius:clamp(5px,.65vw,9px);
  box-shadow:0 30px 62px -40px rgba(60,30,10,.5);
}

#proj .pxgal img{
  width:100%;
  height:auto;
  margin:0;
  object-fit:contain;
}

.pxplate-cap{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin-top:14px;
  padding-inline:2px;
  color:var(--warm-gray);
}

.pxplate-cap .mono{
  font-size:.6rem;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.pxplate-cap .pxfig{
  color:var(--zone);
}

/* Final states are the defaults. JavaScript only arms hidden states after it
   has found every element, so failed or absent scripts leave the page visible. */
.project-opening-item,
.project-cinematic-image,
.project-cinematic-image img,
.project-settle-text{
  opacity:1;
  transform:none;
}

.project-opening-item{clip-path:inset(0);}
.project-cinematic-image,
.project-cinematic-image img{clip-path:none;}

.project-opening-item{
  transition:
    opacity var(--opening-duration,1050ms) var(--e-expo) var(--opening-delay,0ms),
    transform var(--opening-duration,1050ms) var(--e-expo) var(--opening-delay,0ms),
    clip-path var(--opening-duration,1050ms) var(--e-expo) var(--opening-delay,0ms);
}

.project-cinematic-image{
  transition:
    opacity var(--cinematic-duration,1020ms) var(--e-expo) var(--cinematic-delay,0ms),
    transform var(--cinematic-duration,1020ms) var(--e-expo) var(--cinematic-delay,0ms),
    clip-path calc(var(--cinematic-duration,1020ms) + 100ms) var(--e-expo) var(--cinematic-delay,0ms),
    box-shadow 600ms var(--e-quart);
}

.project-cinematic-image img{
  transition:
    opacity calc(var(--cinematic-duration,1020ms) - 100ms) var(--e-quart) var(--cinematic-delay,0ms),
    transform calc(var(--cinematic-duration,1020ms) + 140ms) var(--e-expo) var(--cinematic-delay,0ms);
}

.project-settle-text{
  transition:
    opacity var(--text-duration,900ms) var(--e-quint) var(--settle-delay,100ms),
    transform var(--text-duration,900ms) var(--e-expo) var(--settle-delay,100ms);
}

html.project-cinematic-enabled body:not(.calm) #proj .project-opening-item{
  animation:none !important;
}

html.project-cinematic-enabled body:not(.calm) #proj:not(.project-opening-started) .project-opening-item{
  opacity:0;
  transform:translate3d(0,var(--opening-rise,56px),0);
  clip-path:inset(var(--opening-clip,0 0 0 0));
  will-change:opacity,transform,clip-path;
}

html.project-cinematic-enabled body:not(.calm) #proj .project-cinematic-image:not(.is-settled){
  opacity:.06;
  transform:translate3d(var(--cinematic-x,0),var(--cinematic-rise,58px),0);
  clip-path:inset(var(--cinematic-clip,8% 3% 12% 3%) round var(--cinematic-radius,8px));
  will-change:opacity,transform,clip-path;
}

html.project-cinematic-enabled body:not(.calm) #proj .project-cinematic-image:not(.is-settled) img{
  opacity:.62;
  transform:scale(var(--cinematic-scale,1.055));
  will-change:opacity,transform;
}

html.project-cinematic-enabled body:not(.calm) #proj .project-settle-text:not(.is-settled){
  opacity:0;
  transform:translate3d(var(--text-x,0),var(--text-rise,38px),0);
  will-change:opacity,transform;
}

#proj.project-opening-started .project-opening-item{
  opacity:1;
  transform:none;
  clip-path:inset(0);
  will-change:auto;
}

#proj .project-cinematic-image.is-settled,
#proj .project-cinematic-image.is-settled img{
  opacity:1;
  transform:none;
  clip-path:none;
  will-change:auto;
}

#proj .project-settle-text.is-settled{
  opacity:1;
  transform:none;
  will-change:auto;
}

#proj .project-opening-eyebrow{--opening-delay:140ms;--opening-rise:48px;}
#proj .project-opening-title{--opening-delay:260ms;--opening-duration:1120ms;--opening-rise:68px;--opening-clip:0 0 100% 0;}
#proj .project-opening-tag{--opening-delay:430ms;--opening-rise:58px;}
#proj .project-opening-chips{--opening-delay:540ms;--opening-rise:48px;}
#proj .project-opening-edition{--opening-delay:650ms;--opening-rise:38px;}

#proj .proj-banner .project-cinematic-image{
  --cinematic-delay:520ms;
  --cinematic-duration:1280ms;
  --cinematic-rise:62px;
  --cinematic-scale:1.065;
  --cinematic-clip:7% 2.5% 12% 2.5%;
}

#proj .proj-banner .project-settle-text{
  --text-duration:980ms;
}

#proj .project-cinematic-image.is-settled:hover{
  transform:translateY(-3px);
  box-shadow:0 38px 72px -38px rgba(60,30,10,.58);
}

#proj .proj-banner .project-cinematic-image.is-settled:hover{
  transform:none;
}

@media(max-width:880px){
  #proj .proj-hero h1{font-size:clamp(3.2rem,13vw,6.4rem);}
  #proj .proj-sec{padding-block:clamp(72px,11vh,118px);}
  #proj .pxcols{gap:42px;}
}

@media(max-width:640px){
  #proj .proj-hero{padding-top:clamp(142px,19vh,184px);padding-bottom:48px;}
  #proj .proj-hero h1{line-height:.94;}
  #proj .proj-banner{padding-inline:16px;margin-bottom:88px;}
  #proj .proj-sec{padding-block:72px;}
  #proj .proj-sec .sechead{margin-bottom:34px;}
  #proj .pxgal{columns:1;}
  #proj .pxgal figure,
  #proj .pxgal figure.project-plate{margin-bottom:68px;}
  /* One column on phones: every plate runs full width, no staggered insets. */
  #proj .pxgal figure:nth-child(5n+2):not(.pxwide),
  #proj .pxgal figure:nth-child(5n+4):not(.pxwide){width:100%;margin-left:0;}
  .pxplate-cap{margin-top:12px;}
  .pxplate-cap .mono:last-child{text-align:right;}
}

@media(prefers-reduced-motion:reduce){
  .project-opening-item,
  .project-cinematic-image,
  .project-cinematic-image img,
  .project-settle-text{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    transition:none !important;
    will-change:auto !important;
  }
}

body.calm .project-opening-item,
body.calm .project-cinematic-image,
body.calm .project-cinematic-image img,
body.calm .project-settle-text{
  animation:none !important;
  opacity:1 !important;
  transform:none !important;
  clip-path:none !important;
  transition:none !important;
  will-change:auto !important;
}