/* Generated from the Figma "Portfolio Design" frames.
   Every element is placed at its Figma x/y/size, in cqw of a 1920px frame,
   so the page is an exact scale of the design at any desktop width. */
@font-face{font-family:'Inter';src:url(../fonts/inter-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(../fonts/inter-latin-wght-italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(../fonts/instrument-sans-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(../fonts/instrument-sans-latin-wght-italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;background:#fff}
.fp{position:relative;width:100%;container-type:inline-size;overflow:hidden}
.fp>.a{position:absolute;margin:0}
.fp .t{display:flex;flex-direction:column;font-size:calc(var(--fs) * 100cqw / 1920);line-height:normal}
.fp .t span{font-size:calc(var(--fs) * 100cqw / 1920)}
.fp .t p{margin:0;white-space:pre-wrap}
.fp .au p{white-space:pre}
.fp .t p.li{padding-left:1.3em;text-indent:-1.3em}
.fp a{color:inherit;text-decoration:none}
.fp a.t{cursor:pointer;transition:opacity .15s}
.fp a.t:hover{opacity:.65}
.fp .im{overflow:hidden}
.fp img{display:block;max-width:none}
.fp .ov{z-index:5}
.fp .vid{overflow:hidden;background:#000}
.fp .vid iframe,.fp .vid video{width:100%;height:100%;border:0;display:block;object-fit:contain;background:#000}

@media (max-width:1120px){
  .fp{display:flex;flex-flow:row wrap;align-items:flex-start;gap:16px 18px;padding:24px 20px 56px;aspect-ratio:auto!important;container-type:normal;max-width:760px!important;margin-left:auto!important;margin-right:auto!important}
  .fp>.a{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;order:var(--o)}
  .fp>.t.hd{width:auto!important}
  .fp>.t[style*="--mbg"]{width:auto!important;background:var(--mbg);padding:12px 26px;border-radius:14px;margin:4px auto}
  .fp>.r,.fp>.ov{display:none}
  .fp .t,.fp .t span{font-size:clamp(16px,calc(var(--fs) * .66px),46px)}
  .fp .t{text-align:left!important}
  .fp>.t[style*="--mcard"]{background:var(--mcard);padding:20px 22px;border-radius:18px}
  .fp .au p{white-space:pre-wrap}
  .fp img.g:not(.mq-i){height:auto!important;width:100%!important}
  .fp .vid{aspect-ratio:16/9}
}

/* Clients & Agencies logo strip: full-bleed, continuous right-to-left loop */
.fp{overflow-x:visible;overflow-y:clip}
html,body{overflow-x:clip}
.fp>.mq{overflow:hidden;background:#2b2b2b;left:calc(50cqw - 50vw)!important;width:100vw!important}
.fp .mq-view{width:100%;height:100%;overflow:hidden}
.fp .mq-track{display:flex;width:max-content;height:100%;animation:mq-scroll 34s linear infinite;will-change:transform}
.fp .mq:hover .mq-track{animation-play-state:paused}
.fp .mq-set{position:relative;flex:none;height:100%;width:var(--setw)}
.fp .mq-i{position:absolute;transition:transform .35s}
.fp .mq-i:hover{transform:scale(1.08)}
@keyframes mq-scroll{to{transform:translateX(calc(-1 * var(--setw)))}}
@media (max-width:1120px){
  .fp>.mq{height:118px!important;width:calc(100% + 32px)!important;margin:0 -16px;left:auto!important}
  .fp .mq-view{width:880px;container-type:inline-size}
  .fp .mq-track{animation-name:mq-scroll-m}
  @keyframes mq-scroll-m{to{transform:translateX(-25%)}}
}

/* Prototype embeds, styled like the previous case-study pages */
.fp .proto{background:#2b2b2b;overflow:visible}
.fp .proto .case-embed{width:100%;height:100%;border:0;display:block;background:#2b2b2b}
.fp .proto-link{margin:0;padding-top:calc(22 * 100cqw / 1920);font-family:'Instrument Sans',sans-serif;font-size:max(14px,calc(18 * 100cqw / 1920));color:#6b6b6b}
.fp .proto-link a{color:#000;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1120px){.fp .proto{aspect-ratio:16/9}.fp .proto-link{font-size:14px;padding-top:0}}

.fp h1,.fp h2{margin:0;font-size:calc(var(--fs) * 100cqw / 1920);font-weight:inherit}
@media (max-width:1120px){.fp h1,.fp h2{font-size:clamp(16px,calc(var(--fs) * .66px),46px)}}

.fp>a.t[style*="--bw"]{overflow:visible}
.fp>a.t[style*="--bw"]::before{content:"";position:absolute;left:calc(var(--bx) * 1cqw);top:calc(var(--by) * 1cqw);width:calc(var(--bw) * 1cqw);height:calc(var(--bh) * 1cqw);border-radius:1.5625cqw}
@media (max-width:1120px){.fp>a.t[style*="--bw"]::before{display:none}}

.fp>.meta{margin:0;border-radius:1.5625cqw;font-family:'Instrument Sans',system-ui,sans-serif}
.fp>.meta>div{position:absolute;top:0;bottom:0}
.fp>.meta dt{position:absolute;top:21%;font-size:1.25cqw;line-height:1.2;color:#6b6b6b}
.fp>.meta dd{position:absolute;top:57%;margin:0;font-size:1.25cqw;line-height:1.2;color:#000;left:0;right:0}
.fp>.quote p:first-child span{font-style:italic;font-size:1.5625cqw!important}
.fp>.quote p:last-child span{color:#6b6b6b!important}
.fp>.resume-link{margin:0;font-family:'Instrument Sans',system-ui,sans-serif;font-size:1.25cqw;color:#444}
.fp>.resume-link a{color:#000;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1120px){
  .fp>.meta{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;padding:18px 20px;border-radius:20px}
  .fp>.meta>div{position:static;width:auto!important}
  .fp>.meta dt,.fp>.meta dd{position:static;font-size:14px}
  .fp>.meta dd{font-size:16px;margin-top:2px}
  .fp>.quote p:first-child span{font-size:20px!important}
  .fp>.resume-link{font-size:16px}
}