.branding-case-study{--brand-accent:#168657;--orange:#168657}
.branding-case-study .project-intro{background:var(--brand-accent)}
.branding-case-study .project-intro.is-preloader{background:var(--paper);color:var(--orange)}
.branding-case-study .project-brand{color:var(--brand-accent)}
.branding-case-study .project-heading>span,.branding-case-study .project-back b,.branding-case-study .case-progress>strong{color:var(--brand-accent)}
.branding-case-study .case-progress i span{background:var(--brand-accent)}
.branding-case-study .case-next::before{color:#16865710}
.branding-case-study .case-next:hover>strong{color:var(--brand-accent)}
.branding-case-study .case-next>b{background:var(--brand-accent)}

.case-gallery{min-height:100svh;padding:clamp(105px,9vw,170px) clamp(16px,4vw,72px);background:#d8d2c3e8}
.case-gallery::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 50% 44%,#fff7,transparent 48%),linear-gradient(135deg,#d8d2c3,#e9e5db)}
.case-gallery>header{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:clamp(18px,3vw,50px);max-width:1600px;margin:0 auto clamp(28px,4vw,64px)}
.case-gallery>header>span{color:var(--brand-accent);font-family:Ppneuemontreal,Arial,sans-serif;font-size:clamp(70px,9vw,160px);font-weight:700;line-height:.7;letter-spacing:-.08em}
.case-gallery small{display:block;margin-bottom:.65rem;color:var(--brand-accent);font-size:clamp(9px,.72vw,13px);font-weight:700;letter-spacing:.14em}
.case-gallery h2{max-width:960px;margin:0;font-family:Ppneuemontreal,Arial,sans-serif;font-size:clamp(38px,4.5vw,86px);line-height:.88;letter-spacing:-.055em}
.case-gallery-grid{display:block;max-width:1600px;margin:0 auto}
.case-gallery-row{display:flex;align-items:stretch;gap:clamp(5px,.55vw,10px);height:clamp(250px,25vw,410px)}
.case-gallery-row+.case-gallery-row{margin-top:clamp(5px,.55vw,10px)}
.gallery-grid-four .case-gallery-row{height:clamp(300px,34vw,540px)}
.case-gallery figure{position:relative;flex:1 1 0;min-width:0;height:100%;margin:0;border:1px solid #fff8;border-radius:clamp(5px,.6vw,11px);background:#e9e5db;box-shadow:0 1.2vw 3vw #5b50431c;overflow:hidden;transition:flex .55s cubic-bezier(.16,.9,.3,1),filter .4s ease,box-shadow .4s ease}
.case-gallery figure img{display:block;width:100%;height:100%;object-fit:cover;opacity:.18;filter:blur(10px);transform:scale(1.08);transition:opacity .75s calc(var(--item-index)*45ms),filter .95s calc(var(--item-index)*45ms),transform 1.05s calc(var(--item-index)*45ms) cubic-bezier(.16,.9,.3,1)}
.case-gallery.is-visible figure img{opacity:1;filter:none;transform:none}
.gallery-zoom{position:absolute;z-index:3;right:10px;bottom:10px;display:grid;grid-template-columns:14px auto;align-items:center;column-gap:7px;height:34px;padding:0 12px;border:1px solid #fff8;border-radius:999px;background:#171717c9;color:#fff;opacity:0;transform:translateY(8px);cursor:pointer;backdrop-filter:blur(12px);transition:opacity .25s,transform .35s cubic-bezier(.16,.9,.3,1),background .25s}
.gallery-zoom span{display:grid;place-items:center;width:14px;height:14px;margin:0;font-size:16px;font-weight:500;line-height:1;transform:none;transition:transform .35s cubic-bezier(.16,.9,.3,1)}
.gallery-zoom small{display:flex;align-items:center;align-self:center;height:14px;margin:0;padding:0;color:inherit;font-size:8px;font-weight:700;line-height:14px;letter-spacing:.12em}
.case-gallery figure:hover .gallery-zoom,.gallery-zoom:focus-visible{opacity:1;transform:none}
.gallery-zoom:hover{background:var(--brand-accent)}
.gallery-zoom:hover span{transform:rotate(90deg)}

@media(hover:hover){
  .case-gallery-row figure:hover,.case-gallery-row figure:focus-within{flex:4 1 0;box-shadow:0 1.8vw 4.5vw #3c5a4930}
  .case-gallery-row:has(figure:hover) figure:not(:hover){filter:saturate(.72) brightness(.82)}
}
@media(any-hover:none) and (min-width:901px){.case-gallery-row figure:focus-within{flex:4 1 0}}

.case-video-panel{min-height:100svh;display:grid;place-items:center;padding:clamp(96px,9vw,150px) 20px 54px;background:#151515}
.vertical-video-frame{position:relative;height:min(82svh,1024px);aspect-ratio:9/16;border:1px solid #ffffff2e;border-radius:clamp(7px,.7vw,13px);background:#090909;box-shadow:0 2vw 8vw #0007;overflow:hidden}
.case-motion-video{display:block;width:100%;height:100%;object-fit:cover;opacity:.24;filter:blur(12px);transform:scale(1.045);transition:opacity 1s cubic-bezier(.16,.9,.3,1),filter 1.15s cubic-bezier(.16,.9,.3,1),transform 1.4s cubic-bezier(.16,.9,.3,1)}
.case-video-panel.is-visible .case-motion-video{opacity:1;filter:none;transform:none}
.video-controls{position:absolute;z-index:4;left:50%;bottom:13px;display:flex;gap:5px;padding:5px;border:1px solid #fff5;border-radius:999px;background:#141414b8;transform:translateX(-50%);backdrop-filter:blur(14px)}
.video-controls button{display:grid;grid-template-columns:18px auto;align-items:center;gap:5px;height:31px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:#fff;cursor:pointer;transition:background .25s,color .25s}
.video-controls button:hover,.video-controls button:focus-visible{background:#fff;color:#111;outline:none}
.video-controls button[aria-pressed="true"]{background:var(--brand-accent);color:#fff}
.video-controls button>span{display:grid;place-items:center;width:18px;height:18px;margin:0;font-size:14px;font-weight:700;line-height:1;text-align:center}
.video-controls button>small{align-items:center;align-self:center;height:18px;margin:0;padding:0;color:inherit;font-size:7px;font-weight:700;line-height:18px;letter-spacing:.11em;white-space:nowrap}

.case-video-gallery{min-height:100svh;background:#151515}
.case-video-gallery::before{background:radial-gradient(circle at 50% 42%,#16865731,transparent 46%),linear-gradient(145deg,#111,#1b1b1b)}
.case-video-gallery h2{color:#fff}
.video-gallery-track{display:flex;align-items:stretch;gap:clamp(5px,.6vw,10px);height:min(74svh,820px);max-width:1600px;margin:0 auto}
.video-gallery-item{position:relative;flex:1 1 0;min-width:0;height:100%;border:1px solid #ffffff2e;border-radius:clamp(7px,.7vw,13px);background:#080808;box-shadow:0 2vw 8vw #0007;overflow:hidden;transition:flex .55s cubic-bezier(.16,.9,.3,1),filter .4s ease,box-shadow .4s ease}
.video-gallery-item .vertical-video-frame{width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:inherit;box-shadow:none}
.case-video-gallery.is-visible .case-motion-video{opacity:1;filter:none;transform:none}
.video-gallery-index{position:absolute;z-index:5;top:12px;left:12px;display:grid;place-items:center;min-width:34px;height:27px;padding:0 8px;border:1px solid #ffffff52;border-radius:999px;background:#1212129e;color:#fff;font-size:9px;font-weight:700;letter-spacing:.1em;backdrop-filter:blur(12px)}
.video-gallery-item .video-controls button{grid-template-columns:18px;padding:0 7px}
.video-gallery-item .video-controls button>small{display:none}
.case-video-gallery[data-video-gallery-mode="focus"] .video-gallery-item{flex:.8 1 0}
.case-video-gallery[data-video-gallery-mode="focus"] .video-gallery-item.is-active{flex:4.4 1 0;box-shadow:0 2.2vw 9vw #000a}
.case-video-gallery[data-video-gallery-mode="focus"] .video-gallery-item.is-active .video-controls button{grid-template-columns:18px auto;padding:0 10px}
.case-video-gallery[data-video-gallery-mode="focus"] .video-gallery-item.is-active .video-controls button>small{display:flex}
.case-video-gallery[data-video-gallery-mode="focus"] .video-gallery-track:has(.video-gallery-item.is-active) .video-gallery-item:not(.is-active){filter:saturate(.62) brightness(.68)}
@media(hover:hover){
  .video-gallery-item:hover,.video-gallery-item:focus-within{flex:3.5 1 0;box-shadow:0 2.2vw 9vw #000a}
  .video-gallery-track:has(.video-gallery-item:hover) .video-gallery-item:not(:hover){filter:saturate(.65) brightness(.7)}
  .video-gallery-item:hover .video-controls button,.video-gallery-item:focus-within .video-controls button{grid-template-columns:18px auto;padding:0 10px}
  .video-gallery-item:hover .video-controls button>small,.video-gallery-item:focus-within .video-controls button>small{display:flex}
}
@media(any-hover:none) and (min-width:901px){
  .video-gallery-item:focus-within{flex:3.5 1 0}
  .video-gallery-item:focus-within .video-controls button{grid-template-columns:18px auto;padding:0 10px}
  .video-gallery-item:focus-within .video-controls button>small{display:flex}
}

.poster-lightbox{position:fixed;z-index:9999;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#111e;color:#fff;overflow:hidden;backdrop-filter:blur(18px)}
.poster-lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.poster-lightbox::backdrop{background:#111d;backdrop-filter:blur(14px)}
.poster-lightbox-toolbar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;min-height:62px;padding:10px clamp(12px,2vw,28px);border-bottom:1px solid #ffffff20;background:#171717b8;backdrop-filter:blur(16px)}
.poster-lightbox-count{font-size:9px;font-weight:700;letter-spacing:.14em}
.poster-lightbox-toolbar>div{display:flex;gap:5px}
.poster-lightbox-toolbar button{min-width:38px;height:38px;padding:0 11px;border:1px solid #ffffff3d;border-radius:999px;background:#ffffff0d;color:#fff;font:700 13px/1 Ppneuemontreal,Arial,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.poster-lightbox-toolbar button:hover,.poster-lightbox-toolbar button:focus-visible{border-color:#fff;background:#fff;color:#111;outline:none}
.poster-lightbox-toolbar .poster-lightbox-close{margin-left:7px;background:var(--brand-accent);border-color:var(--brand-accent);font-size:22px}
.poster-lightbox-stage{display:flex;align-items:flex-start;justify-content:center;overflow:auto;overscroll-behavior:contain;padding:clamp(16px,3vw,44px)}
.poster-lightbox-stage img{display:block;flex:0 0 auto;max-width:none;height:auto;border-radius:8px;box-shadow:0 24px 90px #0009;transition:width .35s cubic-bezier(.16,.9,.3,1),opacity .25s;opacity:0}
.poster-lightbox-stage img.is-ready{opacity:1}
body.has-poster-lightbox{overflow:hidden}

@media(max-width:900px){
  .case-gallery{position:relative;min-height:0;padding:90px 14px}
  .case-gallery>header{grid-template-columns:1fr;gap:18px;margin-bottom:34px}
  .case-gallery>header>span{font-size:76px}
  .case-gallery-grid,.video-gallery-track{align-items:stretch;gap:8px;width:calc(100% + 14px);max-width:none;margin-right:-14px;padding:0 14px 10px 0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scroll-padding-inline:0 14px;scroll-behavior:smooth;scrollbar-width:none;touch-action:pan-x pan-y;cursor:grab;-webkit-overflow-scrolling:touch}
  .video-gallery-track{display:grid;grid-auto-flow:column}
  .case-gallery-grid.is-pointer-dragging,.video-gallery-track.is-pointer-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
  .case-gallery-grid::-webkit-scrollbar,.video-gallery-track::-webkit-scrollbar{display:none}
  .case-gallery-grid{--mobile-gallery-card:min(76vw,480px);display:flex;height:clamp(260px,55vw,380px)}
  .case-gallery-grid.gallery-grid-four{--mobile-gallery-card:min(80vw,540px);height:clamp(280px,66vw,480px)}
  .case-gallery-grid .case-gallery-row{display:flex;flex:0 0 auto;width:max-content;height:100%;gap:8px}
  .case-gallery-grid .case-gallery-row+.case-gallery-row{margin:0 0 0 8px}
  .case-gallery-grid .case-gallery-row figure,.case-gallery-grid .case-gallery-row figure:focus-within{flex:0 0 var(--mobile-gallery-card);width:var(--mobile-gallery-card);min-width:var(--mobile-gallery-card);height:100%;scroll-snap-align:start;scroll-snap-stop:always}
  .case-gallery-grid img{-webkit-user-drag:none;user-select:none}
  .video-gallery-track{grid-auto-columns:min(76vw,440px);height:min(68svh,720px)}
  .video-gallery-item,.video-gallery-item:focus-within,.video-gallery-item.is-active,.case-video-gallery[data-video-gallery-mode="focus"] .video-gallery-item,.case-video-gallery[data-video-gallery-mode="focus"] .video-gallery-item.is-active{width:100%;min-width:0;height:100%;flex:none;scroll-snap-align:start;scroll-snap-stop:always}
  .case-video-gallery[data-video-gallery-mode="focus"] .video-gallery-track:has(.video-gallery-item.is-active) .video-gallery-item:not(.is-active){filter:saturate(.75) brightness(.76)}
  .mobile-gallery-drag{position:absolute;z-index:30;display:flex;align-items:center;justify-content:center;gap:9px;opacity:1;pointer-events:none;transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 8px 18px #0003);transition:opacity .3s ease,transform .45s cubic-bezier(.16,.9,.3,1)}
  .mobile-gallery-drag b{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--brand-accent,#ff4b31);color:#fff;font-family:Ppneuemontreal,Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:.02em}
  .mobile-gallery-drag-arrow{display:block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent}
  .mobile-gallery-drag-arrow.is-left{border-right:7px solid currentColor}
  .mobile-gallery-drag-arrow.is-right{border-left:7px solid currentColor}
  .case-video-gallery .mobile-gallery-drag{color:#fff}
  .case-gallery:not(.case-video-gallery) .mobile-gallery-drag{color:#403f3c}
  .case-gallery.has-used-mobile-drag>.mobile-gallery-drag{opacity:0;transform:translate(-50%,-50%) scale(.7)}
}
@media(min-width:901px){.mobile-gallery-drag{display:none!important}}
@media(max-width:520px){
  .case-gallery{padding:74px 10px}
  .case-gallery h2{font-size:40px}
  .mobile-gallery-drag{gap:7px}
  .mobile-gallery-drag b{width:68px;height:68px;font-size:13px}
  .case-gallery-grid,.video-gallery-track{width:calc(100% + 10px);margin-right:-10px;padding-right:10px;gap:7px;scroll-padding-right:10px}
  .case-gallery-grid{--mobile-gallery-card:84vw;height:300px}
  .case-gallery-grid.gallery-grid-four{--mobile-gallery-card:87vw;height:330px}
  .gallery-zoom{right:6px;bottom:6px;height:29px;padding:0 9px;opacity:1;transform:none}
  .gallery-zoom small{font-size:7px}
  .case-video-panel{min-height:0;padding:72px 12px 34px}
  .case-video-gallery{padding-inline:10px}
  .video-gallery-track{grid-auto-columns:84vw;height:72svh}
  .video-controls{bottom:8px;gap:2px;padding:4px}
  .video-controls button{height:29px}
  .video-gallery-item:focus-within .video-controls button{grid-template-columns:16px auto;padding:0 7px}
  .video-gallery-item:focus-within .video-controls button>small{display:flex;font-size:6px}
  .poster-lightbox-toolbar{min-height:54px}
  .poster-lightbox-toolbar button{min-width:34px;height:34px;padding:0 9px}
  .poster-lightbox-stage{padding:10px}
}
@media(prefers-reduced-motion:reduce){.case-gallery figure img,.case-motion-video{opacity:1;filter:none;transform:none;transition:none}}