* { box-sizing: border-box; }
html { overflow-x: clip; background-color: var(--colours--dark); }
body { width: 100%; overflow-x: clip; }
button, summary { font: inherit; color: inherit; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 1001; padding: 1rem; background: #fff; }
.skip-link:focus { top: 1rem; }

.cookie-panel {
  position: fixed;
  inset-inline-end: var(--space-3);
  inset-block-end: max(var(--space-3), env(safe-area-inset-bottom));
  z-index: 1000;
  width: min(28rem, calc(100% - 2 * var(--space-3)));
  max-height: calc(100dvh - var(--space-6));
  overflow: auto;
  padding: var(--space-3);
  border: 1px solid var(--colours--dark-grey);
  border-radius: 4px;
  background: var(--colours--dark);
  color: var(--colours--light);
  box-shadow: 0 6px 30px #0002;
}
.cookie-panel[hidden] { display: none; }
.cookie-panel .cookie-panel__title { margin-block-end: var(--space-1); font-size: 1.125rem; }
.cookie-panel a, .privacy-policy a { text-decoration: underline; text-underline-offset: 3px; }
.cookie-panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-block-start: var(--space-2); }
.cookie-panel__actions button {
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid currentColor;
  border-radius: 3px;
  background: transparent;
}
.cookie-panel__actions button:hover { background: var(--variation-overlay); }
.cookie-settings {
  padding: 0;
  border: 0;
  background: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-blue.page-privacy .about-hero__grid { row-gap: var(--space-6); }
.privacy-policy { display: grid; grid-column: 1 / -1; gap: var(--space-4); max-width: 42rem; min-width: 0; overflow-wrap: anywhere; }
.privacy-policy__section { display: grid; gap: var(--space-1); }
.privacy-policy__section h2 { font-size: 1.5rem; }
.privacy-policy__section .cookie-settings { justify-self: start; }
.privacy-policy__date { color: var(--colours--grey); }
#cookies { scroll-margin-top: var(--space-10); }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-page-motion]) main > :first-child {
    animation: page-entrance .32s cubic-bezier(.22, 1, .36, 1);
  }

  html:is([data-page-motion="leave"], [data-page-motion="enter"])::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--variation-overlay, #b9b9b8);
    pointer-events: none;
  }

  html[data-page-motion="leave"]::after {
    animation: page-cover .15s cubic-bezier(.55, .08, .75, .5) both;
  }

  html[data-page-motion="enter"]::after {
    animation: page-uncover .27s cubic-bezier(.22, 1, .36, 1) both;
  }
}

@keyframes page-entrance {
  from { opacity: .88; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes page-cover {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes page-uncover {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

.nav {
  top: 0;
  background-color: transparent;
  transition: transform 1s ease, padding 1s ease, background-color .2s ease, box-shadow .2s ease;
}
[data-scrolling-started="true"] .nav {
  background-color: var(--colours--dark);
  box-shadow: 0 1px 0 rgba(19, 19, 19, .12);
}
.nav-logo_link { display: inline-flex; align-items: center; gap: .65rem; }
#projects, #menu { appearance: none; border: 0; background: none; font: inherit; text-align: left; }
#projects { padding-block: 0; }
#menu { padding-inline: 0; }
.menu-text_wrapper, .menu-text, .nav-dropdown-btn { display: block; }
[data-nav-status="open"] .nav { background-color: var(--colours--dark); transform: translateY(0); }
.menu .cms-projects_img { display: block; width: 100%; min-width: 0; height: 100%; }
.menu .main-title__list:hover .dropdown_menu-btn { color: rgba(19, 19, 19, .35); }
.menu .main-title__list .main-title__item:is(:hover, :focus-within) .dropdown_menu-btn { color: var(--colours--light); }
.menu .main-title__item:focus-within .view-link { opacity: 1; }
.menu .main-title__list { height: auto; }
.menu__all-projects { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; margin-top: 18px; border-top: 1px solid var(--colours--dark-grey); color: var(--colours--light); font-size: 14px; font-weight: 700; }
.menu__all-projects:hover { text-decoration: underline; text-underline-offset: 4px; }
.navbar-link { min-height: 3.5rem; }
.footer-text, .footer-text p { font-family: inherit; font-weight: 400; }
.underline-link::before,
.underline-link::after,
.underline-link.is--alt::before,
.underline-link.is--alt::after { background-color: currentColor; }
.home-hero { position: relative; z-index: 10; padding: 0 1.875rem; }
.hero-container { width: 100%; display: flex; flex-direction: column; align-items: center; }
.marquee { margin-left: -1.875rem; margin-right: -1.875rem; }
.marquee__heading { white-space: nowrap; }
.intro__body { margin: 0; }
.card__service { background: #dededd; color: #505050; }
.card__services { margin-top: .2rem; }
.card__cycle-item { opacity: 0; transition: opacity .5s cubic-bezier(.4, 0, .2, 1); }
.card__cycle-item[data-active] { opacity: 1; }
.card__hover { position: absolute; bottom: 1rem; right: 1rem; background: #fff; color: #131313; border-radius: 2rem; padding: .8rem 1.1rem; opacity: 0; transform: translateY(.5rem); transition: opacity .3s, transform .3s; }
.card__link:hover .card__hover, .card__link:focus-visible .card__hover { opacity: 1; transform: none; }
.card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.card__video:not([data-playing]) { visibility: hidden; }
.video-label { display: flex; align-items: center; justify-content: center; height: 100%; background: #282827; color: #fff; font-size: 4rem; }
.industry__keyline { border-top: 1px solid var(--colours--dark-grey); padding-top: 1.5rem; }
.about-hero__title--default { display: block !important; }
.about-overview__t { margin: 0; }
.about-text > .underline-link { align-self: flex-start; }
.section__pad { padding-top: 6rem; padding-bottom: 6rem; }
.section-head { width: 100%; }
.faq { width: 100%; border-top: 1px solid var(--colours--dark-grey); }
.faq__item { border-bottom: 1px solid var(--colours--dark-grey); }
.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; padding: 1rem .5rem 1rem 0; }
.faq__item summary::-webkit-details-marker, .case-readmore summary::-webkit-details-marker { display: none; }
.faq__item h3 { margin: 0; font-size: 1.125rem; line-height: 1.4; }
.faq__icon { font-size: 1.75rem; transition: transform .42s cubic-bezier(.16, 1, .3, 1); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__answer { max-width: 66.666%; padding: 1rem 0; }
.faq__answer p { line-height: 1.5; }
.faq:has([open]) .faq__item:not([open]) summary { color: #747474; }
.case-summary { line-height: 1.4; }
.case-readmore { margin-top: 1rem; }
.case-readmore summary { list-style: none; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.case-readmore[open] summary span { transform: rotate(45deg); }
.case-readmore__body { margin-top: 1.4rem; }
.case-readmore__body p + p { margin-top: 1.4rem; }
.cs-media-list { width: 100%; }
.cs-media-list .image-cs-1 { display: block; width: 100%; height: auto; }
.cs-media-list .cs-grid { align-items: start; }
.cs-media-list .video.aspect { min-height: 0; }
.bunny-bg__video { object-fit: cover; }
.video-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #e4e4e2; }
.bunny-bg__video[hidden] { display: none; }
.main-img__item { opacity: 0; transition: opacity .1s linear; }
.main-img__item:first-child { opacity: 1; }
.pie-thumbnail { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #282827; color: #fff; }
.gsap-line-mask { padding-block: .1em; margin-block: -.1em; }
@supports (interpolate-size: allow-keywords) {
  .faq__item::details-content, .case-readmore::details-content {
    interpolate-size: allow-keywords;
    block-size: 0;
    overflow: clip;
    transition: block-size .6s cubic-bezier(.625, .05, 0, 1), content-visibility .6s allow-discrete;
  }
  .faq__item[open]::details-content, .case-readmore[open]::details-content { block-size: auto; }
}
@media (min-width: 1440px) { .faq__item h3 { font-size: 1rem; } }
@media (max-width: 991px) {
  .home-hero { padding-inline: 1.3rem; }
  .marquee { margin-inline: -1.3rem; }
  .faq__item h3 { font-size: 1rem; }
  .menu { overflow-y: auto; max-height: 100dvh; }
  .menu, .menu .main, .menu .case-studies_overlay, .menu .dropdown-background, .menu .dropdown_menu-btn { background-color: var(--colours--dark); color: var(--colours--light); }
  .menu-text_wrapper { height: 1em; }
  .menu .main-title__list:hover .dropdown_menu-btn { color: var(--colours--light); }
}
@media (max-width: 767px) { .section__pad { padding-block: 4rem; } }
@media (max-width: 479px) {
  .home-hero { padding-inline: 16px; }
  .marquee { margin-inline: -16px; }
  .nav-logo_link { gap: .35rem; }
  .nav-logo_link span { font-size: .875rem; }
  .faq__answer { max-width: none; }
  .industry__row { gap: 2rem; }
  .video-label { font-size: 2.5rem; }
  .card__hover { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .card__cycle-item, .card__hover, .faq__icon, .main-img__item { transition: none; }
}