/* Site-specific additions on top of the Webflow export.
   Buttons share the "Available" pill's colours: dark #0a0a0a fill, #252525 border, #838383 text.
   Light theme: #f6f6f6 fill, #e6e6e6 border, #6b6b6b text. */

/* Theme toggle */
.theme-toggle{background-color:#0a0a0a;border-color:#252525;transition:border-color .25s,background-color .25s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.theme-toggle:hover,.theme-toggle:focus-visible{background-color:#141414;border-color:#444}
html.theme-light .theme-toggle{background-color:#f6f6f6;border-color:#e6e6e6}
html.theme-light .theme-toggle:hover,html.theme-light .theme-toggle:focus-visible{background-color:#efefef;border-color:#c8c8c8}

/* Hero call-to-action buttons */
.hero-cta{display:flex;justify-content:center;gap:12px;margin-top:28px}
.hero-btn{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 24px;border:1px solid #252525;border-radius:4px;background-color:#0a0a0a;color:#838383;font-family:Wfvisualsans,Arial,sans-serif;font-size:14px;letter-spacing:.3px;line-height:1;text-decoration:none;transition:border-color .25s,background-color .25s,color .25s}
.hero-btn svg{width:14px;height:14px;flex:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.hero-btn:hover,.hero-btn:focus-visible{border-color:#444;background-color:#141414;color:#fff;outline:none}
.hero-btn.is-primary:hover svg{transform:translateX(3px)}
.hero-btn.is-cv:hover svg{transform:translateY(2px)}
html.theme-light .hero-btn{border-color:#e6e6e6;background-color:#f6f6f6;color:#6b6b6b}
html.theme-light .hero-btn:hover,html.theme-light .hero-btn:focus-visible{border-color:#c8c8c8;background-color:#efefef;color:#111}
@media (max-width:479px){.hero-cta{flex-direction:column;align-items:stretch;width:100%;box-sizing:border-box;padding:0 16px}.hero-btn{justify-content:center}}
@media (prefers-reduced-motion:reduce){.hero-btn svg{transition:none}.hero-btn:hover svg,.theme-toggle:hover{transform:none!important}}

/* Project list: two categories, each a two-column grid on tablet and desktop */
.project-content-wrapper{align-items:stretch;grid-row-gap:72px;row-gap:72px}
.work-group{width:100%}
.work-group-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:20px}
.work-group-title{margin:0;color:var(--white-p100);font-family:Wfvisualsans,Arial,sans-serif;font-size:20px;font-weight:500;line-height:28px;letter-spacing:.3px}
.work-group-sub{margin:0;color:var(--grey);font-family:Wfvisualsans,Arial,sans-serif;font-size:14px;font-weight:300;line-height:22px;text-align:right}
.work-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:768px){
  .work-section{max-width:1040px;padding-left:24px;padding-right:24px;box-sizing:border-box}
  .work-grid{grid-template-columns:1fr 1fr}
  .work-grid .project-wrapper{padding:24px;height:100%;box-sizing:border-box}
  .work-grid .title-div{padding-top:12px;padding-bottom:20px}
  .work-grid .heading-5{font-size:26px;line-height:34px}
  .work-grid .small-space{height:24px}
  .work-grid .project-link img{display:block;width:100%;height:auto;aspect-ratio:1500/960;object-fit:cover;object-position:center top}
  .work-grid .roles-item{gap:16px}
  .work-grid .roles-item>.body-project:first-child{width:120px;flex:none}
  .work-grid .roles-item>.body-project:last-child{flex:1;width:auto}
}
@media (max-width:479px){.work-group-head{flex-direction:column;gap:4px}.work-group-sub{text-align:left}}

/* Project images in full colour by default (Webflow had them greyscale until hover) */
.screenshot-1.hover-shadow,.screenshot-1.hover-shadow:hover,.project-wrapper:hover .screenshot-1.hover-shadow{filter:none}

/* case study images: always fill the content column */
.project-img-div{width:100%}
.project-img-div>img{display:block;width:100%;height:auto}

/* footer in columns, with a way into the Player */
.footer-2{max-width:1040px}
.foot-cols{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start!important;justify-items:stretch!important;width:100%}
.foot-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.foot-col .foot-k{margin:0 0 6px;color:var(--grey);font-family:Wfvisualsans,Arial,sans-serif;font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.foot-col a,.foot-col .foot-t{margin:0;color:var(--grey);font-family:Wfvisualsans,Arial,sans-serif;font-size:14px;line-height:22px;text-decoration:none;overflow-wrap:anywhere}
.foot-col a{transition:color .2s}
.foot-col a:hover{color:var(--white-p100)}
.foot-col a.foot-cta{color:var(--white-p100)}
.foot-col.end{text-align:right;align-items:flex-end}
@media (max-width:767px){.foot-cols{grid-template-columns:1fr 1fr;row-gap:28px}.foot-col.end{text-align:left;align-items:flex-start}}
.footer-2>.separator-white-new{margin-bottom:80px}
.footer-2{padding-bottom:80px}
.footer-2+.small-space{display:none}