/* Panama Coffee / scoped case layout, v1.3 */
.case-panama{--paper: #f3f0e9; --paper2: #eae6db; --ink: #1b2925; --sub: #6b756f; --line: #d4d3cb; --forest: #082c24; --forest2: #113c31; --pine: #2d6b53; --white: #fafaf7; --gutter: clamp(20px,6vw,104px); --max: 1540px;}
.case-panama *{box-sizing: border-box;}
.case-panama{scroll-behavior: smooth;}
.case-panama{margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 'Inter','Helvetica Neue',Arial,sans-serif; -webkit-font-smoothing: antialiased;}
.case-panama button,.case-panama a{font: inherit;}
.case-panama button{cursor: pointer;}
.case-panama button:focus-visible,.case-panama a:focus-visible{outline: 3px solid #ba3130; outline-offset: 4px;}
.case-panama a{color: inherit; text-decoration: none;}
.case-panama img{display: block; max-width: 100%;}
.case-panama p,.case-panama h1,.case-panama h2,.case-panama h3,.case-panama figure{margin: 0;}
.case-panama p{line-height: 1.74;}
.case-panama h1,.case-panama h2,.case-panama h3{font-weight: 500; letter-spacing: -.064em; line-height: 1.06;}
.case-panama .shell{max-width: var(--max); padding-inline: var(--gutter); margin: auto;}
.case-panama .eyebrow{font-size: 11px; line-height: 1.5; letter-spacing: .145em; font-weight: 650; text-transform: uppercase;}
.case-panama .muted{color: var(--sub);}
.case-panama .serif{font-family: var(--font-ui),Arial,sans-serif; font-weight: 400; font-style: normal; letter-spacing: -.065em;}








.case-panama .menu-toggle{display: none; background: none; border: 1px solid var(--line); padding: 8px 12px; color: var(--ink);}


.case-panama .intro{padding-top: 72px; padding-bottom: 82px;}
.case-panama .intro__top{display: flex; justify-content: space-between; gap: 20px; color: var(--sub); margin-bottom: 42px;}
.case-panama .intro__title{font-size: clamp(58px,8vw,137px); max-width: 1400px; line-height: .97;}
.case-panama .intro__title .serif{color: var(--pine);}
.case-panama .intro__bottom{display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,330px); gap: 70px; align-items: end; margin-top: 54px;}
.case-panama .intro__bottom p{font-size: clamp(18px,2.1vw,28px); line-height: 1.42; letter-spacing: -.025em; max-width: 860px;}
.case-panama .intro__brand{text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 22px;}
.case-panama .intro__brand img{width: min(100%,295px); height: auto; object-fit: contain;}
.case-panama .intro__brand span{max-width: 270px; color: var(--sub);}
.case-panama .hero{height: clamp(560px,67vw,840px); position: relative; isolation: isolate; overflow: hidden; background: #1d3430;}
.case-panama .hero>picture,.case-panama .hero>picture>img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 54%;}
.case-panama .hero:after{content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg,rgba(4,17,15,.86),rgba(4,17,15,.1) 72%),linear-gradient(0deg,rgba(3,12,10,.65),transparent 45%);}
.case-panama .hero__inside{height: 100%; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 2; padding-top: 55px; padding-bottom: 50px; color: #fff;}
.case-panama .hero__top{display: flex; justify-content: space-between; align-items: center; gap: 20px;}
.case-panama .hero__top img{width: 240px; filter: brightness(0) invert(1); height: auto; object-fit: contain;}
.case-panama .hero__head{font-size: clamp(59px,8vw,132px); line-height: .95; max-width: 960px; letter-spacing: -.07em;}
.case-panama .hero__head .serif{color: #e0dbc7;}
.case-panama .hero__foot{display: flex; justify-content: space-between; gap: 20px; align-items: end; font-size: 13px; color: #e9eee9;}
.case-panama .hero__foot>p{max-width: 460px;}
.case-panama .section{padding-block: clamp(90px,10vw,165px);}
.case-panama .section__intro{display: grid; grid-template-columns: .95fr 1fr; gap: 8%; align-items: end; margin-bottom: 55px;}
.case-panama .section__intro h2{font-size: clamp(49px,6.45vw,104px); max-width: 700px;}
.case-panama .section__intro h2 .serif{color: var(--pine);}
.case-panama .section__intro>p{font-size: clamp(16px,1.36vw,20px); max-width: 610px; color: var(--sub);}
.case-panama .section__kicker{color: var(--pine); margin-bottom: 21px;}
.case-panama .divide{border-top: 1px solid var(--line);}
.case-panama .story{display: grid; grid-template-columns: .82fr 1.18fr; gap: 12%; padding-block: clamp(86px,10vw,150px);}
.case-panama .story h2{font-size: clamp(52px,6.8vw,102px);}
.case-panama .story h2 .serif{color: var(--pine);}
.case-panama .story .copy>p{font-size: clamp(17px,1.55vw,22px); color: #414c46;}
.case-panama .story .copy>p+p{margin-top: 24px;}
.case-panama .service-line{display: flex; flex-wrap: wrap; gap: 11px; margin-top: 42px;}
.case-panama .service-line span{padding: 9px 14px; border: 1px solid #c1c7c1; border-radius: 70px; font-size: 12px; font-weight: 600;}












.case-panama .image-figure{position: relative; min-width: 0;}
.case-panama .image-zoom{width: 100%; height: 100%; display: block; padding: 0; border: 0; background: #dfddd5; position: relative; overflow: hidden; color: inherit;}
.case-panama .image-zoom>img{width: 100%; height: 100%; min-height: 270px; object-fit: cover; transition: transform .65s cubic-bezier(.2,.8,.25,1);}
.case-panama .image-zoom:hover>img{transform: scale(1.045);}
.case-panama .zoom-indicator{position: absolute; right: 20px; top: 20px; background: #fff; color: #102e25; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-size: 19px; opacity: 0; transform: translateY(5px); transition: .2s;}
.case-panama .image-zoom:hover .zoom-indicator,.case-panama .image-zoom:focus-visible .zoom-indicator{opacity: 1; transform: none;}
.case-panama .image-figure figcaption{display: flex; justify-content: space-between; gap: 15px; color: inherit; font-size: 11px; letter-spacing: .075em; text-transform: uppercase; padding-block: 15px;}
.case-panama .image-figure figcaption span:first-child{opacity: .65;}

.case-panama .materials-grid{display: grid; grid-template-columns: 1.2fr .8fr; gap: 45px 26px;}
.case-panama .materials-grid .image-figure:first-child{grid-row: span 2;}
.case-panama .materials-grid .image-figure:first-child .image-zoom{height: calc(100% - 42px);}
.case-panama .materials-grid .image-figure:first-child img{height: 100%; min-height: 570px;}
.case-panama .materials-grid .image-figure:not(:first-child) img{aspect-ratio: 16/10; min-height: 240px;}
.case-panama .material-tail{display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; align-items: center; padding-top: 76px;}
.case-panama .material-tail img{width: 100%; aspect-ratio: 16/10; object-fit: cover;}
.case-panama .material-tail p{font-size: clamp(19px,2.1vw,29px); line-height: 1.43; letter-spacing: -.03em; max-width: 575px;}
.case-panama .material-tail .eyebrow{display: block; margin-bottom: 24px; color: var(--pine);}
.case-panama .web-section{background: #e9ebe5;}
.case-panama .web-section .section__intro{margin-bottom: 42px;}
.case-panama .web-frame{border: 1px solid #bec6be; border-radius: 7px; overflow: hidden; box-shadow: 0 24px 45px #182b251b; background: #fff;}
.case-panama .browser-toolbar{height: 44px; display: flex; align-items: center; gap: 8px; padding-inline: 17px; border-bottom: 1px solid #ced4cf; background: #f7faf7;}
.case-panama .browser-toolbar .dot{width: 9px; height: 9px; border-radius: 50%; background: #adc3b8;}
.case-panama .browser-toolbar .browser-address{margin: auto; border: 1px solid #dae1db; border-radius: 4px; padding: 4px 30px; background: #fff; color: #77857c; font-size: 11px;}
.case-panama .web-frame .image-zoom>img{min-height: 0; height: auto; aspect-ratio: 1.6; object-fit: cover; object-position: center;}
.case-panama .website-note{padding: 20px 0; display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; font-size: 13px; color: #57675f;}
.case-panama .website-note p{max-width: 720px;}
.case-panama .text-link{font-weight: 700; border-bottom: 1px solid #1b3e31; white-space: nowrap; padding-bottom: 5px;}
.case-panama .digital-strip{display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 60px; align-items: center;}
.case-panama .digital-strip img{width: 100%; aspect-ratio: 16/10; object-fit: cover;}
.case-panama .digital-strip h3{font-size: clamp(33px,4.2vw,64px); margin-bottom: 21px;}
.case-panama .digital-strip p{font-size: 17px; max-width: 550px; color: #54635b;}
.case-panama .social-header{display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: -14px 0 40px;}
.case-panama .social-header span{border: 1px solid #b9bfb9; padding: 9px 17px; border-radius: 60px; font-size: 12px;}
.case-panama .campaign-gallery{display: grid; grid-template-columns: 1fr 1fr; gap: 24px;}
.case-panama .campaign-gallery .image-zoom img{aspect-ratio: 4/5; min-height: 0; object-fit: cover;}
.case-panama .campaign-gallery figcaption{font-size: 12px;}
.case-panama .wide-note{display: grid; grid-template-columns: 1.1fr .9fr; gap: 10%; border-top: 1px solid var(--line); margin-top: 60px; padding-top: 27px;}
.case-panama .wide-note h3{font-size: clamp(27px,3.4vw,47px);}
.case-panama .wide-note p{font-size: 17px; color: #5d6861;}
.case-panama .film-section{background: #102a24; color: #f7f5ec;}
.case-panama .film-section .section__kicker{color: #8fbba9;}
.case-panama .film-section h2 .serif{color: #c7dbce;}
.case-panama .film-section .section__intro>p{color: #bccfc4;}
.case-panama .film-layout{display: grid; grid-template-columns: 1.3fr .7fr; gap: 22px;}
.case-panama .film-video{position: relative; background: #000; aspect-ratio: 16/9; overflow: hidden;}
.case-panama .film-video video{display: block; width: 100%; height: 100%; object-fit: cover;}
.case-panama .film-side{display: grid; grid-template-rows: 1fr 1fr; gap: 22px; min-height: 0;}
.case-panama .film-side img{width: 100%; height: 100%; object-fit: cover;}
.case-panama .film-side figure{position: relative; overflow: hidden;}
.case-panama .film-side span{position: absolute; left: 14px; bottom: 14px; background: #0f2f26bb; color: white; padding: 7px 11px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;}
.case-panama .film-note{display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 18px; font-size: 12px; color: #b8cfc1;}
.case-panama .closing{padding-block: 125px;}
.case-panama .closing h2{font-size: clamp(58px,8.5vw,135px); max-width: 1100px; margin: 32px 0;}
.case-panama .closing h2 .serif{color: var(--pine);}
.case-panama .closing__bottom{border-top: 1px solid var(--line); padding-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px;}
.case-panama .closing__bottom p{font-size: 19px; color: #526159; max-width: 620px;}
.case-panama .closing__actions{display: flex; flex-wrap: wrap; gap: 15px; justify-content: flex-end; align-items: start;}
.case-panama .closing__actions a{padding: 14px 18px; border: 1px solid #9fa9a1; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;}
.case-panama .closing__actions a:last-child{background: var(--forest); color: #fff; border-color: var(--forest);}





.case-panama dialog{border: 0; padding: 0; margin: auto; max-width: none; max-height: none; width: 100vw; height: 100vh; background: #07110df5; color: #fff;}
.case-panama dialog::backdrop{background: #04120eea;}
.case-panama .lb__body{height: 100%; display: flex; align-items: center; justify-content: center; padding: 50px 6vw;}
.case-panama .lb__body img{max-width: 100%; max-height: 85vh; width: auto; height: auto; object-fit: contain;}
.case-panama .lb__close{position: absolute; right: 23px; top: 20px; background: transparent; border: 1px solid #aab9b0; color: #fff; padding: 11px 16px;}
.case-panama .lb__caption{position: absolute; left: 6vw; bottom: 24px; font-size: 13px; color: #b9c9c0;}
@media (max-width:1050px) {.case-panama .intro__title{font-size: clamp(54px,9vw,105px);}
.case-panama .intro__bottom{gap: 35px;}



.case-panama .film-layout{grid-template-columns: 1fr;}
.case-panama .film-side{grid-template-columns: 1fr 1fr; grid-template-rows: auto;}
.case-panama .film-side figure{height: 240px;}}
@media (max-width:720px) {.case-panama{--gutter: 22px;}



.case-panama .menu-toggle{display: block;}


.case-panama .intro{padding-top: 36px; padding-bottom: 54px;}
.case-panama .intro__top{margin-bottom: 38px;}
.case-panama .intro__top span:last-child{display: none;}
.case-panama .intro__title{font-size: clamp(48px,11.7vw,80px); letter-spacing: -.078em;}
.case-panama .intro__bottom{grid-template-columns: 1fr; gap: 25px; margin-top: 37px;}
.case-panama .intro__brand{align-items: flex-start; text-align: left; gap: 14px;}
.case-panama .intro__brand img{max-width: 215px;}
.case-panama .intro__brand span{max-width: 100%;}
.case-panama .hero{height: 635px;}
.case-panama .hero>picture>img{object-position: 58% center;}
.case-panama .hero:after{background: linear-gradient(90deg,#081713b8,#0817133d),linear-gradient(0deg,#081713e8,transparent 60%);}
.case-panama .hero__inside{padding-top: 34px; padding-bottom: 30px;}
.case-panama .hero__top img{max-width: 130px;}
.case-panama .hero__head{font-size: clamp(50px,12vw,77px);}
.case-panama .hero__foot{display: block;}
.case-panama .hero__foot p{margin-bottom: 15px;}
.case-panama .story{grid-template-columns: 1fr; gap: 34px;}
.case-panama .story h2{font-size: 55px;}
.case-panama .section__intro{grid-template-columns: 1fr; gap: 25px;}
.case-panama .section__intro h2{font-size: clamp(49px,10vw,68px);}
.case-panama .section{padding-block: 83px;}




.case-panama .materials-grid{grid-template-columns: 1fr; gap: 20px;}
.case-panama .materials-grid .image-figure:first-child{grid-row: auto;}
.case-panama .materials-grid .image-figure:first-child img{min-height: 0; aspect-ratio: 16/11;}
.case-panama .materials-grid .image-figure:first-child .image-zoom{height: auto;}
.case-panama .materials-grid .image-figure:not(:first-child) img{min-height: 0;}
.case-panama .material-tail{grid-template-columns: 1fr; gap: 24px; padding-top: 43px;}
.case-panama .web-frame .image-zoom>img{aspect-ratio: 1.35;}
.case-panama .website-note{flex-direction: column; gap: 13px;}
.case-panama .digital-strip{grid-template-columns: 1fr; gap: 24px;}
.case-panama .campaign-gallery{grid-template-columns: 1fr; gap: 20px;}
.case-panama .campaign-gallery .image-zoom img{aspect-ratio: 4/5;}
.case-panama .wide-note{grid-template-columns: 1fr; gap: 22px;}
.case-panama .film-side figure{height: 180px;}
.case-panama .closing{padding-block: 83px;}
.case-panama .closing h2{font-size: clamp(55px,11.5vw,90px);}
.case-panama .closing__bottom{grid-template-columns: 1fr; gap: 26px;}
.case-panama .closing__actions{justify-content: flex-start;}

}
@media (max-width:380px) {.case-panama .intro__title{font-size: 45px;}
.case-panama .hero__head{font-size: 48px;}
.case-panama .film-side figure{height: 130px;}}
@media (prefers-reduced-motion:reduce) {.case-panama{scroll-behavior: auto;}
.case-panama .image-zoom img,.case-panama .zoom-indicator{transition: none !important;}}
.case-panama .intro__brand img{mix-blend-mode: multiply;}
.case-panama .hero__top .eyebrow:last-child{text-align: right; opacity: .78;}
.case-panama .hero>picture{z-index: 0;}
.case-panama .hero>picture>img{object-position: 50% 44%;}
.case-panama .hero__video{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; display: block; z-index: 0; pointer-events: none; background: transparent;}
.case-panama .hero:after{z-index: 1; background: linear-gradient(90deg,rgba(5,18,15,.9) 0%,rgba(5,18,15,.62) 47%,rgba(5,18,15,.27) 100%),linear-gradient(0deg,rgba(4,15,12,.73),transparent 47%);}
.case-panama .film-feature{position: relative; overflow: hidden; aspect-ratio: 16/9; background: #0c1d17;}
.case-panama .film-feature img{width: 100%; height: 100%; object-fit: cover; display: block;}
.case-panama .film-feature:after{content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(0deg,rgba(4,16,13,.75),transparent); pointer-events: none;}
.case-panama .film-feature figcaption{position: absolute; z-index: 1; inset: auto 25px 23px; color: #fff; display: flex; flex-direction: column; gap: 7px;}
.case-panama .film-feature figcaption span{font-size: 10px; letter-spacing: .15em; font-weight: 700;}
.case-panama .film-feature figcaption strong{font-size: clamp(17px,2vw,28px); font-weight: 500; letter-spacing: -.03em;}
@media (max-width:720px) {.case-panama .hero__video{object-position: 55% 50%;}
.case-panama .hero>picture>img{object-position: 55% 50%;}
.case-panama .hero:after{background: linear-gradient(90deg,rgba(5,18,15,.86),rgba(5,18,15,.5)),linear-gradient(0deg,rgba(4,15,12,.84),transparent 65%);}
.case-panama .film-feature figcaption{inset: auto 18px 16px;}}
@media (prefers-reduced-motion:reduce) {.case-panama .hero__video{display: none;}}