@font-face {
  font-family: "Widy";
  src:
    url("https://jrdrnfrejnferfvre.ru/assets/Widy-Medium.woff") format("woff"),
    url("https://jrdrnfrejnferfvre.ru/assets/Widy-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f5f5f3;
  --paper-deep: #ecece9;
  --paper-line: rgba(0, 0, 0, .08);
  --ink: #080808;
  --soft-ink: rgba(8, 8, 8, .56);
  --softest-ink: rgba(8, 8, 8, .36);
  --white: #f8f8f8;
  --max: 1480px;
  --pad: 28px;
  --radius: 28px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --hero-axis-shift: -10px;
  --hero-axis-target-shift: 0px;
  --hero-gap: 224px;
  --hero-kicker-gap: 16px;
  --hero-dot-gap: 9px;
  --hero-dots-lift: 18px;
  --hero-mark-shift: 110px;
  --hero-dots-offset: 210px;
  --hero-kicker-offset: 258px;
  --hero-stack-gap: 72px;
  --hero-mark-center-shift: 0;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--white);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.co2-tilda-page a,
.co2-tilda-page a:visited,
.co2-tilda-page a:active {
  color: inherit !important;
}

img,
video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-shell {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 0 var(--pad);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 20px 0;
  backdrop-filter: none;
  background: transparent;
  border-bottom: 0;
}

.page-contact .site-header {
  background: transparent;
  backdrop-filter: none;
}

.header-inner,
.footer-inner,
.page-intro-inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
}

.page-intro-inner > div {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.header-inner {
  align-items: center;
}

.site-header .header-inner {
  display: flex;
  align-items: center;
}

.page-home .header-inner {
  justify-content: flex-end;
}

body:not(.page-home) .site-header .header-inner {
  justify-content: space-between;
}

body:not(.page-home) .site-header .site-logo {
  margin-left: 8px;
  flex: 0 0 auto;
}

body:not(.page-home) .site-header .site-nav {
  flex: 0 0 auto;
  align-items: center;
}

.site-logo,
.hero-mark,
.page-title,
.service-panel h2,
.work-copy-block h2,
.contact-panel h2,
.section-label,
.showreel-label,
.service-chip,
.nav-pill,
.primary-link,
.secondary-link {
  font-family: "Widy", "Arial Black", Impact, sans-serif;
  font-weight: 500;
  letter-spacing: 0;
}

.site-logo {
  font-size: 34px;
  line-height: .82;
  color: var(--ink) !important;
  opacity: .44;
  transition: opacity .24s ease;
}

.site-logo:hover {
  opacity: .82;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nav-pill,
.primary-link,
.secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 999px;
  background: transparent;
  color: var(--ink) !important;
  font-size: 13px;
  text-transform: uppercase;
  transition: transform .24s var(--ease), background .24s var(--ease), color .24s var(--ease);
}

.nav-pill:hover,
.nav-pill.is-current,
.nav-pill:visited:hover,
.nav-pill.is-current:visited,
.primary-link:hover,
.primary-link:visited:hover,
.secondary-link:hover,
.secondary-link:visited:hover {
  transform: translateY(-2px);
  background: var(--ink);
  color: var(--white) !important;
}

.hero {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 0;
  overflow: hidden;
  background: var(--white);
}

.hero-inner {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
}

.hero-stage {
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}

.hero-video-layer {
  position: absolute;
  inset: -4%;
  overflow: hidden;
  background: var(--white);
}

.hero-video-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(248, 248, 248, .04), rgba(248, 248, 248, .12) 72%, rgba(248, 248, 248, .26) 100%);
}

.hero-video {
  position: absolute;
  inset: -8%;
  width: calc(100% + 16%);
  height: calc(100% + 16%);
  object-fit: cover;
  object-position: center center;
  opacity: .88;
  filter: brightness(1.12) saturate(.9) contrast(.94);
}

.hero-lockup {
  position: relative;
  z-index: 5;
  display: grid;
  justify-items: center;
  align-content: center;
  row-gap: 0;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0 auto;
  padding: 0 clamp(28px, 5vw, 72px);
  transform: translateY(-80px);
}

.hero-dots {
  display: inline-grid;
  grid-auto-flow: row;
  justify-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none;
  margin-bottom: clamp(128px, 17vh, 176px);
}

.hero-dots span {
  width: 4px;
  height: 4px;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
}

.hero-copy {
  text-align: center;
  display: grid;
  justify-items: center;
  row-gap: 8px;
}

.hero-mark {
  margin: 0;
  font-size: clamp(96px, 14vw, 164px);
  line-height: .86;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.hero-mark-char {
  display: block;
}

.hero-mark-o {
  position: relative;
  z-index: 2;
}

.hero-kicker {
  margin: 0;
  color: rgba(8, 8, 8, .76);
  font-size: clamp(16px, 1.65vw, 24px);
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: .02em;
  white-space: nowrap;
  text-align: center;
}

.hero-credits {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(38px, 5vh, 54px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 20px;
  color: var(--ink);
  font-size: clamp(11px, .95vw, 16px);
  line-height: 1.22;
  letter-spacing: 0;
  text-transform: none;
  width: 100%;
  padding: 0 clamp(38px, 8vw, 108px);
  color: var(--soft-ink);
}

.hero-credits span {
  justify-self: start;
  text-align: left;
  white-space: nowrap;
}

.hero-credits a {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

.section-label {
  color: var(--soft-ink);
  font-size: 12px;
  text-transform: uppercase;
  margin: 16px 0 0;
  width: 100%;
  text-align: center;
}

.works-label {
  width: max-content;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  transform: translateX(-18%);
}

.hero-bubble {
  position: absolute;
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255, 255, 255, .04) 0 34%, rgba(255, 255, 255, .11) 52%, rgba(218, 224, 234, .2) 68%, rgba(20, 20, 24, .34) 82%, rgba(255, 255, 255, .6) 90%, transparent 97%),
    radial-gradient(ellipse at 18% 18%, rgba(255, 255, 255, .72), rgba(255, 255, 255, .36) 12%, transparent 24%),
    radial-gradient(ellipse at 82% 20%, rgba(255, 255, 255, .54), transparent 13%),
    radial-gradient(ellipse at 30% 74%, rgba(255, 255, 255, .08), transparent 22%),
    radial-gradient(ellipse at 56% 84%, rgba(0, 0, 0, .12), transparent 24%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .88),
    inset 0 -8px 18px rgba(0, 0, 0, .12),
    inset 12px 16px 24px rgba(255, 255, 255, .28),
    inset -18px -16px 22px rgba(0, 0, 0, .08),
    0 18px 40px rgba(220, 224, 230, .1),
    0 0 16px rgba(255, 255, 255, .18);
  filter: saturate(1.08) brightness(1.1) contrast(1.02);
  opacity: .62;
  mix-blend-mode: screen;
}

.hero-bubble::before,
.hero-bubble::after,
.hero-bubble > span,
.hero-bubble > i {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.hero-bubble::before {
  inset: 6% 10%;
  background:
    radial-gradient(ellipse at 17% 18%, rgba(255, 255, 255, .95), transparent 12%),
    radial-gradient(ellipse at 24% 13%, rgba(255, 255, 255, .82), transparent 6%),
    radial-gradient(ellipse at 80% 19%, rgba(255, 255, 255, .68), transparent 9%),
    radial-gradient(ellipse at 62% 76%, rgba(255, 255, 255, .2), transparent 15%);
  filter: blur(3px);
  opacity: .94;
}

.hero-bubble::after {
  inset: 1.8% 1.8%;
  border: 1px solid rgba(20, 20, 24, .18);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .3),
    0 0 12px rgba(255, 255, 255, .14);
  opacity: .56;
}

.hero-bubble > span,
.hero-bubble > i {
  display: block;
}

.hero-bubble > span {
  inset: 0;
  background:
    radial-gradient(circle at 19% 18%, rgba(255, 255, 255, .98) 0 2.2%, transparent 3.4%),
    radial-gradient(circle at 25% 14%, rgba(255, 255, 255, .86) 0 1.1%, transparent 2.2%),
    radial-gradient(circle at 77% 19%, rgba(255, 255, 255, .72) 0 1.5%, transparent 2.6%),
    radial-gradient(circle at 69% 24%, rgba(255, 255, 255, .36) 0 .8%, transparent 1.8%);
  filter: blur(1px);
  opacity: .9;
}

.hero-bubble > i {
  inset: 10% 16% 12% 16%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 26%, transparent 74%, rgba(255, 255, 255, .12)),
    radial-gradient(ellipse at 50% 90%, rgba(255, 255, 255, .12), transparent 36%);
  filter: blur(8px);
  opacity: .5;
}

.hero-bubble-large {
  width: clamp(500px, 44vw, 780px);
  height: clamp(162px, 13vw, 246px);
  top: 28%;
  transition: opacity 1.8s var(--ease), transform 2.2s var(--ease), border-radius 2.2s var(--ease), width 2.2s var(--ease), height 2.2s var(--ease);
}

.bubble-left {
  left: -5%;
  border-radius: 56% 44% 54% 46% / 50% 48% 52% 50%;
  clip-path: polygon(0% 51%, 3% 42%, 9% 33%, 20% 24%, 35% 17%, 52% 14%, 69% 15%, 82% 20%, 92% 27%, 98% 38%, 100% 50%, 98% 61%, 92% 70%, 81% 78%, 66% 83%, 49% 85%, 31% 82%, 16% 75%, 6% 66%);
  transform: rotate(-7deg) skewX(-8deg);
}

.bubble-right {
  right: -6%;
  top: 24%;
  border-radius: 46% 54% 42% 58% / 48% 52% 48% 52%;
  clip-path: polygon(0 50%, 3% 40%, 10% 31%, 22% 22%, 38% 16%, 56% 14%, 73% 16%, 86% 22%, 95% 31%, 100% 44%, 99% 57%, 94% 69%, 84% 78%, 69% 84%, 51% 87%, 33% 85%, 16% 78%, 5% 67%);
  transform: rotate(9deg) skewX(10deg);
}

.hero-bubble-small {
  width: clamp(216px, 19vw, 314px);
  height: clamp(152px, 12vw, 226px);
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}

.bubble-a {
  left: 7%;
  top: 36%;
  border-radius: 52% 48% 56% 44% / 48% 46% 54% 52%;
  clip-path: polygon(3% 50%, 7% 39%, 15% 28%, 28% 19%, 45% 14%, 62% 16%, 77% 23%, 89% 34%, 96% 47%, 95% 60%, 89% 72%, 79% 81%, 64% 86%, 46% 86%, 28% 81%, 13% 72%, 5% 60%);
  transform: rotate(-10deg) skewX(-8deg);
  z-index: 5;
}

.bubble-b {
  left: 13%;
  bottom: -2%;
  border-radius: 48% 52% 55% 45% / 46% 43% 57% 54%;
  clip-path: polygon(2% 49%, 6% 39%, 14% 28%, 27% 20%, 43% 15%, 60% 16%, 75% 23%, 88% 33%, 95% 47%, 94% 60%, 89% 72%, 79% 81%, 64% 86%, 47% 87%, 30% 82%, 15% 73%, 6% 60%);
  transform: rotate(8deg) skewX(-6deg);
}

.bubble-c {
  right: 8%;
  top: 34%;
  border-radius: 56% 44% 48% 52% / 46% 54% 46% 54%;
  clip-path: polygon(2% 48%, 6% 37%, 16% 27%, 31% 18%, 49% 14%, 67% 16%, 81% 24%, 92% 35%, 97% 49%, 95% 62%, 89% 74%, 78% 83%, 62% 87%, 44% 87%, 26% 81%, 11% 70%);
  transform: rotate(10deg) skewX(8deg);
}

.bubble-d {
  right: 0%;
  bottom: 2%;
  border-radius: 47% 53% 56% 44% / 49% 45% 55% 51%;
  clip-path: polygon(3% 50%, 7% 39%, 15% 29%, 28% 20%, 45% 15%, 61% 16%, 76% 22%, 88% 33%, 96% 47%, 95% 61%, 90% 73%, 80% 82%, 65% 87%, 48% 87%, 31% 82%, 16% 73%, 6% 61%);
  transform: rotate(-8deg) skewX(6deg);
}

.page-home .hero-stage.is-split .hero-bubble-large {
  opacity: 0;
}

.page-home .hero-stage.is-split .hero-bubble-small {
  opacity: .72;
}

.page-home .hero-stage.is-split .bubble-a {
  animation: bubble-enter-a 2.15s cubic-bezier(.19, .86, .24, 1) both, drift-a 7.6s ease-in-out 2.15s infinite alternate;
}

.page-home .hero-stage.is-split .bubble-b {
  animation: bubble-enter-b 2.25s cubic-bezier(.19, .86, .24, 1) both, drift-b 8s ease-in-out 2.25s infinite alternate;
}

.page-home .hero-stage.is-split .bubble-c {
  animation: bubble-enter-c 2.2s cubic-bezier(.19, .86, .24, 1) both, drift-c 7.4s ease-in-out 2.2s infinite alternate;
}

.page-home .hero-stage.is-split .bubble-d {
  animation: bubble-enter-d 2.3s cubic-bezier(.19, .86, .24, 1) both, drift-d 8.2s ease-in-out 2.3s infinite alternate;
}

.page-home .hero-stage.is-split .bubble-left {
  animation: split-left 2.15s cubic-bezier(.19, .86, .24, 1) forwards;
}

.page-home .hero-stage.is-split .bubble-right {
  animation: split-right 2.15s cubic-bezier(.19, .86, .24, 1) forwards;
}

.subpage {
  padding-bottom: 46px;
}

.page-intro {
  padding: 54px 0 28px;
}

.page-title {
  margin: 8px 0 0;
  font-size: clamp(58px, 10vw, 140px);
  line-height: .84;
  text-transform: uppercase;
  text-align: center;
}

.page-title-clients {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.page-intro-inner {
  display: block;
  text-align: center;
}

.page-note {
  max-width: 480px;
  margin: 12px 0 0;
  color: var(--soft-ink);
  font-size: 17px;
  line-height: 1.35;
}

.content-section {
  padding: 12px 0 0;
}

.work-stack {
  display: grid;
  gap: 20px;
}

.work-card,
.service-panel,
.contact-panel {
  border: 1px solid var(--paper-line);
  border-radius: 30px;
  background: rgba(248, 248, 248, .42);
}

.work-card {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(280px, .7fr);
  gap: 24px;
  padding: 22px;
}

.work-preview {
  min-height: 260px;
  border-radius: 24px;
  overflow: hidden;
}

.video-placeholder {
  height: 100%;
  min-height: 260px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, .08);
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, .9), transparent 28%),
    linear-gradient(135deg, rgba(225, 225, 222, .9), rgba(208, 208, 204, .66));
  color: var(--soft-ink);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}

.work-copy-block {
  display: grid;
  align-content: center;
  gap: 12px;
}

.work-index {
  display: none;
}

.work-copy-block h2,
.service-panel h2,
.contact-panel h2 {
  margin: 0;
  font-size: clamp(18px, 1.85vw, 28px);
  line-height: .92;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.03em;
}

.service-panel h2 {
  font-size: clamp(22px, 2vw, 30px);
}

.work-copy-block p,
.service-panel p,
.contact-panel p {
  margin: 0;
  color: var(--soft-ink);
  font-size: 17px;
  line-height: 1.36;
}

.work-meta {
  display: none;
}

.info-stack {
  display: grid;
  gap: 96px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.service-panel {
  min-height: 340px;
  padding: 24px;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 12px;
}

.service-head {
  display: grid;
  gap: 6px;
  align-content: start;
}

.service-panel-ai .service-head {
  justify-items: start;
  align-content: start;
  min-height: auto;
}

.service-chip {
  color: var(--soft-ink);
  font-size: 12px;
  text-transform: uppercase;
}

.service-video-note {
  margin-top: 0;
  padding: 0;
  border-radius: 22px;
  border: 0;
  background: transparent;
  overflow: hidden;
  min-height: 220px;
  align-self: stretch;
  display: block;
  line-height: 0;
}

.service-video-note p {
  font-size: 14px;
}

.service-video-note video {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  object-position: center center;
  background: transparent;
}

.showreel-panel {
  border: 1px solid var(--paper-line);
  border-radius: 30px;
  background: rgba(248, 248, 248, .42);
  padding: 24px;
  display: grid;
  gap: 12px;
}

.showreel-head h2 {
  margin: 0;
  font-family: "Widy", "Arial Black", Impact, sans-serif;
  font-size: clamp(22px, 2vw, 30px);
  line-height: .92;
  text-transform: uppercase;
}

.showreel-player {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .08);
  background: #000;
}

.showreel-player video {
  width: 100%;
  height: min(56vw, 640px);
  display: block;
  background: #000;
}

.clients-board {
  padding: 28px 0;
  border: 0;
  border-radius: 0;
  background: var(--white);
  isolation: isolate;
}

.clients-board-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  background: #ffffff;
  mix-blend-mode: multiply;
  filter: brightness(1.02) contrast(1.08);
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.client-item {
  min-height: 120px;
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: 20px;
  color: #8f8f8f;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.client-item-titlecase {
  text-transform: none;
}

.contact-panel {
  max-width: 100%;
  margin: 0 auto;
  padding: 36px;
  text-align: center;
  display: grid;
  gap: 18px;
  justify-items: center;
}

.contact-panel-simple {
  position: relative;
  min-height: calc(100svh - 220px);
  width: 100%;
  justify-items: center;
  text-align: center;
  align-content: center;
  background: transparent;
  border: 0;
  overflow: hidden;
}

.contact-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.contact-video-layer {
  position: absolute;
  inset: -14%;
  overflow: hidden;
}

.contact-video {
  position: absolute;
  inset: -18%;
  width: calc(100% + 36%);
  height: calc(100% + 36%);
  object-fit: cover;
  object-position: center center;
  opacity: .88;
  filter: brightness(1.08) saturate(.92) contrast(.96);
}

.contact-panel-simple > *:not(.contact-stage) {
  position: relative;
  z-index: 2;
}

.contact-dots {
  display: grid;
  gap: 5px;
  justify-items: center;
  margin-bottom: 18px;
  transform: translateY(-46px);
  text-decoration: none;
}

.contact-dots span {
  width: 5px;
  height: 5px;
  background: var(--ink);
}

.contact-mail {
  font-family: "Widy", "Arial Black", Impact, sans-serif;
  font-size: clamp(26px, 4.2vw, 58px);
  line-height: .94;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -.02em;
  margin: 0 auto;
  color: var(--ink) !important;
}

.contact-panel p {
  max-width: 520px;
  text-align: center;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.site-footer {
  padding: 18px 0 28px;
}

.footer-index-like {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: clamp(24px, 2.6vw, 40px) !important;
  padding-right: clamp(24px, 2.6vw, 40px) !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 20px;
}

.site-footer span,
.site-footer a {
  color: var(--soft-ink) !important;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

.footer-index-like span {
  justify-self: start;
  text-align: left;
  white-space: nowrap;
}

.footer-index-like a {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

.page-info .footer-index-like,
.page-works .footer-index-like,
.page-clients .footer-index-like,
.co2-tilda-page.page-info .footer-index-like,
.co2-tilda-page.page-works .footer-index-like,
.co2-tilda-page.page-clients .footer-index-like {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: clamp(24px, 2.6vw, 40px) !important;
  padding-right: clamp(24px, 2.6vw, 40px) !important;
  grid-template-columns: 1fr 1fr !important;
}

.page-info .footer-index-like span,
.page-works .footer-index-like span,
.page-clients .footer-index-like span,
.co2-tilda-page.page-info .footer-index-like span,
.co2-tilda-page.page-works .footer-index-like span,
.co2-tilda-page.page-clients .footer-index-like span {
  justify-self: start !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.page-info .footer-index-like a,
.page-works .footer-index-like a,
.page-clients .footer-index-like a,
.co2-tilda-page.page-info .footer-index-like a,
.co2-tilda-page.page-works .footer-index-like a,
.co2-tilda-page.page-clients .footer-index-like a {
  justify-self: end !important;
  text-align: right !important;
  white-space: nowrap !important;
}

@keyframes drift-a {
  from { transform: translate(0, 0) rotate(-10deg) skewX(-8deg) scale(1); }
  to { transform: translate(138px, 92px) rotate(12deg) skewX(-2deg) scale(1.08); }
}

@keyframes drift-b {
  from { transform: translate(0, 0) rotate(8deg) skewX(-6deg) scale(1); }
  to { transform: translate(-118px, 104px) rotate(-11deg) skewX(-1deg) scale(1.08); }
}

@keyframes drift-c {
  from { transform: translate(0, 0) rotate(10deg) skewX(8deg) scale(1); }
  to { transform: translate(-136px, 88px) rotate(-8deg) skewX(2deg) scale(1.08); }
}

@keyframes drift-d {
  from { transform: translate(0, 0) rotate(-8deg) skewX(6deg) scale(1); }
  to { transform: translate(124px, -102px) rotate(10deg) skewX(0deg) scale(1.09); }
}

@keyframes split-left {
  0% {
    opacity: .56;
    width: clamp(460px, 41vw, 720px);
    height: clamp(148px, 12vw, 220px);
    transform: rotate(-7deg) skewX(-8deg) scale(1);
    border-radius: 61% 39% 58% 42% / 52% 48% 52% 48%;
  }
  40% {
    opacity: .58;
    width: clamp(430px, 38vw, 640px);
    height: clamp(154px, 12.4vw, 228px);
    transform: translate(-8px, 14px) rotate(-13deg) skewX(-18deg) scale(1.02, .94);
    border-radius: 74% 26% 60% 40% / 48% 56% 44% 52%;
  }
  74% {
    opacity: .34;
    width: clamp(330px, 28vw, 460px);
    height: clamp(146px, 11.2vw, 214px);
    transform: translate(30px, -4px) rotate(-1deg) skewX(-26deg) scale(.82, .88);
    border-radius: 30% 70% 42% 58% / 52% 62% 38% 48%;
  }
  100% {
    opacity: 0;
    width: clamp(200px, 18vw, 290px);
    height: clamp(140px, 11vw, 210px);
    transform: translate(108px, -24px) rotate(8deg) skewX(-4deg) scale(.18, .24);
    border-radius: 48% 52% 56% 44% / 44% 50% 50% 56%;
  }
}

@keyframes split-right {
  0% {
    opacity: .56;
    width: clamp(460px, 41vw, 720px);
    height: clamp(148px, 12vw, 220px);
    transform: rotate(9deg) skewX(10deg) scale(1);
    border-radius: 42% 58% 38% 62% / 48% 54% 46% 52%;
  }
  40% {
    opacity: .58;
    width: clamp(434px, 38vw, 640px);
    height: clamp(154px, 12.4vw, 228px);
    transform: translate(12px, 12px) rotate(17deg) skewX(18deg) scale(1.02, .94);
    border-radius: 34% 66% 40% 60% / 56% 42% 58% 44%;
  }
  74% {
    opacity: .34;
    width: clamp(330px, 28vw, 460px);
    height: clamp(146px, 11.2vw, 214px);
    transform: translate(-26px, -2px) rotate(2deg) skewX(26deg) scale(.82, .88);
    border-radius: 68% 32% 56% 44% / 42% 58% 42% 58%;
  }
  100% {
    opacity: 0;
    width: clamp(200px, 18vw, 290px);
    height: clamp(140px, 11vw, 210px);
    transform: translate(-112px, -20px) rotate(-8deg) skewX(4deg) scale(.18, .24);
    border-radius: 52% 48% 44% 56% / 50% 44% 56% 50%;
  }
}

@keyframes bubble-enter-a {
  0% { opacity: 0; transform: translate(-72px, -12px) rotate(-24deg) skewX(-24deg) scale(.12, .18); }
  58% { opacity: .38; transform: translate(-20px, 10px) rotate(-16deg) skewX(-18deg) scale(.46, .72); }
  100% { opacity: .84; transform: translate(0, 0) rotate(-10deg) skewX(-8deg) scale(1); }
}

@keyframes bubble-enter-b {
  0% { opacity: 0; transform: translate(76px, -28px) rotate(20deg) skewX(-22deg) scale(.12, .18); }
  58% { opacity: .38; transform: translate(18px, 12px) rotate(12deg) skewX(-16deg) scale(.48, .74); }
  100% { opacity: .84; transform: translate(0, 0) rotate(8deg) skewX(-6deg) scale(1); }
}

@keyframes bubble-enter-c {
  0% { opacity: 0; transform: translate(-70px, -18px) rotate(24deg) skewX(22deg) scale(.12, .18); }
  58% { opacity: .38; transform: translate(-16px, 12px) rotate(14deg) skewX(16deg) scale(.46, .72); }
  100% { opacity: .84; transform: translate(0, 0) rotate(10deg) skewX(8deg) scale(1); }
}

@keyframes bubble-enter-d {
  0% { opacity: 0; transform: translate(74px, -10px) rotate(-22deg) skewX(20deg) scale(.12, .18); }
  58% { opacity: .38; transform: translate(18px, 14px) rotate(-12deg) skewX(14deg) scale(.48, .74); }
  100% { opacity: .84; transform: translate(0, 0) rotate(-8deg) skewX(6deg) scale(1); }
}

@media (max-width: 1100px) {
  .service-grid,
  .clients-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-card {
    grid-template-columns: 1fr;
  }

  .page-intro-inner {
    align-items: end;
  }

  .page-note {
    max-width: 420px;
  }

  .service-panel {
    min-height: 400px;
  }

  .showreel-player video {
    height: min(60vw, 520px);
  }
}

@media (max-width: 900px) {
  .site-header {
    padding: 16px 0;
  }

  .header-inner,
  .footer-inner,
  .page-intro-inner {
    display: grid;
  }

  .site-nav {
    gap: 8px;
  }

  .hero-inner {
    min-height: 78svh;
  }

  .hero-mark {
    font-size: clamp(82px, 13vw, 134px);
  }

  .hero-kicker {
    font-size: 18px;
  }

  :root {
    --hero-axis-target-shift: 0px;
    --hero-gap: 176px;
    --hero-kicker-gap: 14px;
    --hero-dot-gap: 10px;
    --hero-dots-lift: 16px;
    --hero-stack-gap: 56px;
  }

  .bubble-left {
    left: -14%;
    top: 24%;
  }

  .bubble-right {
    right: -16%;
    top: 22%;
  }

  .page-title {
    font-size: clamp(50px, 12vw, 104px);
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .clients-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-panel {
    min-height: 0;
    grid-template-rows: auto minmax(240px, 1fr);
  }

  .service-video-note,
  .service-video-note video {
    min-height: 240px;
    height: 240px;
  }

  .showreel-player video {
    height: 360px;
  }
}

@media (max-width: 760px) {
  .page-contact,
  .page-contact .subpage,
  .page-contact .content-section,
  .page-contact .contact-panel,
  .page-contact .contact-panel-simple,
  .page-contact .site-header,
  .page-contact .header-inner,
  .page-contact .site-shell,
  .page-contact .site-nav,
  .page-contact .site-logo {
    background: transparent !important;
    box-shadow: none !important;
  }

  .page-contact .content-section {
    padding-top: 0;
    margin-top: -10px;
  }

  .page-contact .contact-panel {
    border: 0;
  }

  .page-clients,
  .page-clients .site-header,
  .page-clients .clients-board,
  .page-clients .subpage,
  .page-clients .content-section {
    background: #ffffff;
  }

  :root {
    --white: #ffffff;
  }

  body:not(.page-home) .site-header {
    background: var(--white);
    backdrop-filter: none;
  }

  html,
  body,
  .clients-board {
    background: #ffffff;
  }

  .page-home,
  .page-home .hero,
  .page-home .hero-inner {
    background: transparent;
  }

  .page-home .site-header {
    background: transparent;
    backdrop-filter: none;
  }

  .page-contact .site-header {
    background: transparent !important;
    backdrop-filter: none;
    padding-bottom: 0;
  }

  .page-contact .nav-pill,
  .page-contact .primary-link,
  .page-contact .secondary-link {
    background: transparent !important;
  }

  .page-contact .nav-pill.is-current {
    background: var(--ink) !important;
    color: var(--white) !important;
  }

  .page-contact .nav-pill.is-current {
    background: var(--ink);
    color: var(--white);
  }

  .page-contact .contact-panel-simple {
    background: transparent;
    padding-top: 0;
    min-height: 100svh;
  }

  .page-contact .contact-stage {
    position: fixed;
    top: -4px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
  }

  .page-contact .contact-video-layer {
    inset: -10%;
  }

  .page-contact .contact-video {
    inset: -12%;
    width: calc(100% + 24%);
    height: calc(100% + 24%);
    object-fit: cover;
    object-position: center top;
    transform: translateY(-10%) scale(1.18);
    transform-origin: center top;
  }

  .page-home .hero-stage {
    position: fixed;
    inset: 0;
    left: 0;
    width: 100vw;
    height: 100svh;
    transform: none;
    z-index: 0;
  }

  .page-home .hero-video-layer {
    position: absolute;
    inset: 0;
    background: transparent;
  }

  .page-home .hero-video {
    inset: -10%;
    width: calc(100% + 20%);
    height: calc(100% + 20%);
  }

  .page-home .hero-lockup,
  .page-home .site-header {
    position: relative;
    z-index: 5;
  }

  .nav-pill,
  .primary-link,
  .secondary-link,
  .work-card,
  .service-panel,
  .showreel-panel,
  .contact-panel {
    background: rgba(255, 255, 255, .42);
  }

  .hero-video-layer::after {
    background:
      radial-gradient(circle at center, rgba(255, 255, 255, .04), rgba(255, 255, 255, .12) 72%, rgba(255, 255, 255, .26) 100%);
  }

  :root {
    --pad: 20px;
    --hero-axis-target-shift: 0px;
    --hero-gap: 118px;
    --hero-kicker-gap: 10px;
    --hero-dot-gap: 6px;
    --hero-dots-lift: 18px;
    --hero-mark-shift: 82px;
    --hero-axis-shift: -6px;
    --hero-dots-offset: 136px;
    --hero-kicker-offset: 154px;
    --hero-stack-gap: 78px;
    --hero-mark-center-shift: 0;
  }

  .site-header {
    padding: 14px 0 10px;
  }

  .header-inner,
  .footer-inner,
  .page-intro-inner {
    gap: 10px;
  }

  .header-inner {
    justify-content: stretch;
  }

  .site-logo {
    font-size: 28px;
    justify-self: start;
  }

  .header-inner > .site-logo {
    margin-bottom: 4px;
  }

  .site-nav {
    width: min(100%, 310px);
    margin: 0 auto;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 6px;
    overflow: visible;
  }

  .nav-pill,
  .primary-link,
  .secondary-link {
    width: 100%;
    min-height: 40px;
    padding: 0 6px;
    font-size: 9px;
    letter-spacing: -.01em;
    line-height: 1;
  }

  .nav-pill:hover,
  .nav-pill.is-current,
  .primary-link:hover,
  .secondary-link:hover {
    transform: none;
  }

  .page-home .header-inner {
    justify-content: center;
  }

  .page-home .site-nav {
    margin: 2px auto 0;
  }

  .hero {
    min-height: 100svh;
  }

  .hero-inner {
    min-height: 100svh;
  }

  .hero-dots {
    gap: 5px;
    margin-bottom: 132px;
  }

  .hero-lockup {
    transform: translateY(-104px);
    padding: 0 20px;
  }

  .hero-dots span {
    width: 4px;
    height: 4px;
  }

  .hero-mark {
    font-size: clamp(82px, 24vw, 118px);
  }

  .hero-kicker {
    font-size: 14px;
  }

  .hero-credits {
    bottom: 34px;
    font-size: 10px;
    gap: 16px;
    padding: 0 22px;
    color: var(--soft-ink);
  }

  .hero-credits span {
    white-space: normal;
    max-width: 120px;
  }

  .bubble-left {
    left: -28%;
    top: 27%;
  }

  .bubble-right {
    right: -30%;
    top: 24%;
  }

  .hero-bubble-large {
    width: clamp(360px, 88vw, 520px);
    height: clamp(136px, 28vw, 192px);
  }

  .hero-bubble-small {
    width: clamp(168px, 46vw, 236px);
    height: clamp(120px, 31vw, 176px);
  }

  .page-title {
    font-size: clamp(40px, 13vw, 52px);
    line-height: .9;
  }

  .page-intro {
    padding: 22px 0 18px;
  }

  .page-intro-inner {
    align-items: center;
    justify-content: center;
  }

  .section-label,
  .works-label {
    margin-top: 8px;
    text-align: center;
    transform: none;
  }

  .work-card {
    padding: 14px;
    gap: 14px;
    border-radius: 26px;
  }

  .work-preview,
  .video-placeholder {
    min-height: 196px;
  }

  .work-copy-block h2 {
    font-size: clamp(14px, 4vw, 18px);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .work-copy-block p,
  .contact-panel p,
  .page-note {
    font-size: 14px;
    line-height: 1.34;
  }

  .service-panel {
    padding: 18px;
    gap: 10px;
    grid-template-rows: auto 1fr;
  }

  .service-panel h2 {
    font-size: clamp(18px, 5.8vw, 24px);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: .98;
  }

  .service-panel-ai h2 {
    font-size: clamp(21px, 6.2vw, 26px);
  }

  .service-head {
    gap: 0;
    min-height: auto;
    margin-bottom: 0;
  }

  .service-panel-ai .service-head {
    min-height: auto;
    margin-bottom: 0;
    padding-left: 8px;
    padding-top: 4px;
    justify-items: start;
    align-content: start;
  }

  .service-grid .service-panel:nth-child(2) .service-head {
    margin-bottom: 0;
    padding-left: 8px;
    padding-top: 4px;
  }

  .service-grid .service-panel:nth-child(3) .service-head {
    margin-bottom: 0;
    padding-left: 8px;
    padding-top: 4px;
  }

  .service-video-note,
  .service-video-note video {
    min-height: 188px;
    height: 188px;
  }

  .showreel-panel {
    padding: 18px;
    gap: 10px;
  }

  .showreel-head h2 {
    font-size: clamp(18px, 5.8vw, 24px);
    line-height: .98;
  }

  .showreel-player video {
    height: 200px;
  }

  .clients-grid {
    width: min(100%, 340px);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-template-columns: none;
    gap: 10px 6px;
  }

  .client-item {
    flex: 0 0 calc((100% - 12px) / 3);
    max-width: calc((100% - 12px) / 3);
    min-height: 64px;
    padding: 8px 4px;
    font-size: 12px;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .site-footer {
    padding: 8px 0 12px;
  }

  .footer-inner {
    gap: 4px;
  }

  .footer-index-like {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .site-footer span,
  .site-footer a {
    font-size: 10px;
    line-height: 1.12;
    letter-spacing: 0;
  }

  .footer-index-like span {
    white-space: normal;
    max-width: 120px;
  }

  .page-info .footer-index-like,
  .page-works .footer-index-like,
  .page-clients .footer-index-like,
  .co2-tilda-page.page-info .footer-index-like,
  .co2-tilda-page.page-works .footer-index-like,
  .co2-tilda-page.page-clients .footer-index-like {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .page-info .footer-index-like span,
  .page-works .footer-index-like span,
  .page-clients .footer-index-like span,
  .co2-tilda-page.page-info .footer-index-like span,
  .co2-tilda-page.page-works .footer-index-like span,
  .co2-tilda-page.page-clients .footer-index-like span {
    white-space: normal !important;
    max-width: 120px !important;
  }

  .contact-panel-simple {
    min-height: calc(100svh - 190px);
    padding: 28px 0 18px;
    gap: 12px;
  }

  .contact-video-layer {
    inset: -12%;
  }

  .contact-video {
    inset: -16%;
    width: calc(100% + 32%);
    height: calc(100% + 32%);
  }

  .contact-mail {
    max-width: 100%;
    font-size: clamp(18px, 7.6vw, 28px);
    line-height: .96;
    letter-spacing: -.05em;
    overflow-wrap: anywhere;
  }

  .contact-dots {
    margin-bottom: 8px;
    transform: translateY(-26px);
  }

  .contact-dots span {
    width: 4px;
    height: 4px;
  }

  .contact-panel p {
    max-width: 290px;
  }

}

@media (max-width: 480px) {
  :root {
    --hero-gap: 106px;
    --hero-axis-target-shift: 0px;
    --hero-kicker-gap: 8px;
    --hero-dot-gap: 6px;
    --hero-dots-lift: 20px;
    --hero-mark-shift: 90px;
    --hero-axis-shift: -6px;
    --hero-dots-offset: 120px;
    --hero-kicker-offset: 160px;
    --hero-stack-gap: 46px;
    --hero-mark-center-shift: 0;
  }

  .site-logo {
    font-size: 25px;
  }

  .site-header {
    padding: 12px 0 8px;
  }

  .nav-pill,
  .primary-link,
  .secondary-link {
    min-height: 38px;
    font-size: 9px;
    padding: 0 4px;
    width: 100%;
    border-width: 1px;
  }

  .site-nav {
    width: min(100%, 300px);
  }

  .site-logo {
    margin-top: 2px;
    margin-left: 1px;
  }

  .hero-inner {
    min-height: 100svh;
  }

  .hero-mark {
    font-size: clamp(74px, 23vw, 104px);
  }

  .hero-kicker {
    font-size: 12px;
  }

  .hero-credits {
    bottom: 26px;
    font-size: 9px;
    gap: 12px;
    padding: 0 18px;
    color: var(--soft-ink);
  }

  .hero-lockup {
    transform: translateY(-120px);
    padding: 0 18px;
  }

  .hero-dots {
    margin-bottom: 108px;
  }

  .hero-credits span {
    max-width: 112px;
  }

  .hero-dots span {
    width: 4px;
    height: 4px;
  }

  .page-title {
    font-size: clamp(34px, 10vw, 42px);
  }

  .section-label,
  .works-label {
    margin-top: 7px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    transform: none;
  }

  .page-intro-inner {
    align-items: center;
    justify-content: center;
  }

  .work-preview,
  .video-placeholder {
    min-height: 182px;
  }

  .work-copy-block {
    gap: 10px;
  }

  .work-copy-block h2 {
    font-size: 13px;
    line-height: 1;
  }

  .service-panel {
    padding: 16px;
  }

  .service-panel h2 {
    font-size: 16px;
    line-height: .98;
  }

  .service-panel-ai .service-head {
    margin-bottom: 0;
    padding-left: 8px;
    padding-top: 4px;
  }

  .service-grid .service-panel:nth-child(2) .service-head {
    margin-bottom: 0;
  }

  .service-grid .service-panel:nth-child(3) .service-head {
    margin-bottom: 0;
  }

  .service-video-note,
  .service-video-note video {
    min-height: 176px;
    height: 176px;
  }

  .showreel-player video {
    height: 188px;
  }

  .showreel-head h2 {
    font-size: 16px;
  }

  .clients-grid {
    width: min(100%, 324px);
    gap: 8px 5px;
  }

  .client-item {
    flex-basis: calc((100% - 10px) / 3);
    max-width: calc((100% - 10px) / 3);
    min-height: 58px;
    padding: 7px 3px;
    font-size: 10px;
  }

  .site-footer {
    padding: 6px 0 10px;
  }

  .footer-index-like {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .site-footer span,
  .site-footer a {
    font-size: 9px;
  }

  .footer-index-like span {
    white-space: normal;
    max-width: 112px;
  }

  .page-info .footer-index-like span,
  .page-works .footer-index-like span,
  .page-clients .footer-index-like span,
  .co2-tilda-page.page-info .footer-index-like span,
  .co2-tilda-page.page-works .footer-index-like span,
  .co2-tilda-page.page-clients .footer-index-like span {
    white-space: normal !important;
    max-width: 112px !important;
  }

  .contact-mail {
    font-size: clamp(14px, 5.8vw, 20px);
  }

  .contact-panel-simple {
    min-height: calc(100svh - 176px);
    padding-top: 40px;
    gap: 10px;
  }

  .contact-dots span {
    width: 4px;
    height: 4px;
  }

  .contact-dots {
    margin-bottom: 10px;
    transform: translateY(-28px);
  }

  .contact-panel p {
    font-size: 7px;
    line-height: 1;
    white-space: nowrap;
    max-width: none;
  }
}


/* Tilda compatibility layer */
.co2-tilda-page {
  min-height: 100vh;
  background: var(--white);
}
.co2-tilda-page.page-home {
  background: transparent;
}
.co2-tilda-page .site-shell {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 0 var(--pad);
}

.co2-tilda-page .site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 20px 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(248, 248, 248, .96);
  border-bottom: 0;
}

.co2-tilda-page.page-contact .site-header {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.co2-tilda-page .header-inner,
.co2-tilda-page .footer-inner,
.co2-tilda-page .page-intro-inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
}

.co2-tilda-page .page-intro-inner > div {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.co2-tilda-page .header-inner {
  align-items: center;
}

.co2-tilda-page .site-header .header-inner {
  display: flex;
  align-items: center;
}

.co2-tilda-page.page-home .header-inner {
  justify-content: flex-end;
}

.co2-tilda-page:not(.page-home) .site-header .header-inner {
  justify-content: space-between;
}

.co2-tilda-page:not(.page-home) .site-header .site-logo {
  margin-left: 8px;
  flex: 0 0 auto;
}

.co2-tilda-page:not(.page-home) .site-header .site-nav {
  flex: 0 0 auto;
  align-items: center;
}

/* Final Tilda footer override for Info / Works / Clients */
html body .co2-tilda-page.page-info .site-footer .footer-inner.footer-index-like,
html body .co2-tilda-page.page-works .site-footer .footer-inner.footer-index-like,
html body .co2-tilda-page.page-clients .site-footer .footer-inner.footer-index-like,
html body.page-info .co2-tilda-page .site-footer .footer-inner.footer-index-like,
html body.page-works .co2-tilda-page .site-footer .footer-inner.footer-index-like,
html body.page-clients .co2-tilda-page .site-footer .footer-inner.footer-index-like {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: end !important;
  gap: 20px !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: clamp(24px, 2.6vw, 40px) !important;
  padding-right: clamp(24px, 2.6vw, 40px) !important;
}

html body .co2-tilda-page.page-info .site-footer .footer-inner.footer-index-like > span,
html body .co2-tilda-page.page-works .site-footer .footer-inner.footer-index-like > span,
html body .co2-tilda-page.page-clients .site-footer .footer-inner.footer-index-like > span,
html body.page-info .co2-tilda-page .site-footer .footer-inner.footer-index-like > span,
html body.page-works .co2-tilda-page .site-footer .footer-inner.footer-index-like > span,
html body.page-clients .co2-tilda-page .site-footer .footer-inner.footer-index-like > span {
  justify-self: start !important;
  align-self: end !important;
  text-align: left !important;
  white-space: nowrap !important;
  max-width: none !important;
  color: rgba(8, 8, 8, .56) !important;
  font-size: 12px !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body .co2-tilda-page.page-info .site-footer .footer-inner.footer-index-like > a,
html body .co2-tilda-page.page-works .site-footer .footer-inner.footer-index-like > a,
html body .co2-tilda-page.page-clients .site-footer .footer-inner.footer-index-like > a,
html body.page-info .co2-tilda-page .site-footer .footer-inner.footer-index-like > a,
html body.page-works .co2-tilda-page .site-footer .footer-inner.footer-index-like > a,
html body.page-clients .co2-tilda-page .site-footer .footer-inner.footer-index-like > a {
  justify-self: end !important;
  align-self: end !important;
  text-align: right !important;
  white-space: nowrap !important;
  color: rgba(8, 8, 8, .56) !important;
  font-size: 12px !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

@media (max-width: 768px) {
  html body .co2-tilda-page.page-info .site-footer .footer-inner.footer-index-like,
  html body .co2-tilda-page.page-works .site-footer .footer-inner.footer-index-like,
  html body .co2-tilda-page.page-clients .site-footer .footer-inner.footer-index-like,
  html body.page-info .co2-tilda-page .site-footer .footer-inner.footer-index-like,
  html body.page-works .co2-tilda-page .site-footer .footer-inner.footer-index-like,
  html body.page-clients .co2-tilda-page .site-footer .footer-inner.footer-index-like {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 16px !important;
  }

  html body .co2-tilda-page.page-info .site-footer .footer-inner.footer-index-like > span,
  html body .co2-tilda-page.page-works .site-footer .footer-inner.footer-index-like > span,
  html body .co2-tilda-page.page-clients .site-footer .footer-inner.footer-index-like > span,
  html body.page-info .co2-tilda-page .site-footer .footer-inner.footer-index-like > span,
  html body.page-works .co2-tilda-page .site-footer .footer-inner.footer-index-like > span,
  html body.page-clients .co2-tilda-page .site-footer .footer-inner.footer-index-like > span {
    white-space: normal !important;
    max-width: 120px !important;
    font-size: 10px !important;
  }

  html body .co2-tilda-page.page-info .site-footer .footer-inner.footer-index-like > a,
  html body .co2-tilda-page.page-works .site-footer .footer-inner.footer-index-like > a,
  html body .co2-tilda-page.page-clients .site-footer .footer-inner.footer-index-like > a,
  html body.page-info .co2-tilda-page .site-footer .footer-inner.footer-index-like > a,
  html body.page-works .co2-tilda-page .site-footer .footer-inner.footer-index-like > a,
  html body.page-clients .co2-tilda-page .site-footer .footer-inner.footer-index-like > a {
    font-size: 10px !important;
  }
}

@media (min-width: 769px) {
  html body .co2-tilda-page.page-home .header-inner {
    justify-content: flex-end !important;
  }

  html body .co2-tilda-page.page-home .site-nav {
    margin-left: auto !important;
  }

  html body .co2-tilda-page.page-home .nav-pill:hover:not(.is-current),
  html body .co2-tilda-page.page-home .primary-link:hover:not(.is-current),
  html body .co2-tilda-page.page-home .secondary-link:hover:not(.is-current),
  html body .co2-tilda-page.page-contact .nav-pill:hover:not(.is-current),
  html body .co2-tilda-page.page-contact .primary-link:hover:not(.is-current),
  html body .co2-tilda-page.page-contact .secondary-link:hover:not(.is-current) {
    background: transparent !important;
    background-color: transparent !important;
    color: #080808 !important;
    border-color: rgba(0, 0, 0, .12) !important;
  }

  html body .co2-tilda-page.page-home .nav-pill.is-current,
  html body .co2-tilda-page.page-home .primary-link.is-current,
  html body .co2-tilda-page.page-home .secondary-link.is-current,
  html body .co2-tilda-page.page-contact .nav-pill.is-current,
  html body .co2-tilda-page.page-contact .primary-link.is-current,
  html body .co2-tilda-page.page-contact .secondary-link.is-current {
    background: #080808 !important;
    background-color: #080808 !important;
    color: #f8f8f8 !important;
    border-color: #080808 !important;
  }

  html body .co2-tilda-page.page-home .hero-credits {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: none !important;
    padding-left: 56px !important;
    padding-right: 56px !important;
    gap: 20px !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
    align-items: end !important;
  }

  html body .co2-tilda-page.page-home .hero-credits > span {
    justify-self: start !important;
    text-align: left !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  html body .co2-tilda-page.page-home .hero-credits > a {
    justify-self: end !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  html body .co2-tilda-page.page-info .site-footer .footer-inner.footer-index-like,
  html body .co2-tilda-page.page-works .site-footer .footer-inner.footer-index-like,
  html body .co2-tilda-page.page-clients .site-footer .footer-inner.footer-index-like,
  html body.page-info .co2-tilda-page .site-footer .footer-inner.footer-index-like,
  html body.page-works .co2-tilda-page .site-footer .footer-inner.footer-index-like,
  html body.page-clients .co2-tilda-page .site-footer .footer-inner.footer-index-like {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    width: calc(100vw - 112px) !important;
    max-width: calc(100vw - 112px) !important;
    margin-left: calc(50% - 50vw + 56px) !important;
    margin-right: calc(50% - 50vw + 56px) !important;
    padding-left: 56px !important;
    padding-right: 56px !important;
    gap: 20px !important;
    align-items: end !important;
    justify-content: unset !important;
  }

  html body .co2-tilda-page.page-info .site-footer .footer-inner.footer-index-like > span,
  html body .co2-tilda-page.page-works .site-footer .footer-inner.footer-index-like > span,
  html body .co2-tilda-page.page-clients .site-footer .footer-inner.footer-index-like > span,
  html body.page-info .co2-tilda-page .site-footer .footer-inner.footer-index-like > span,
  html body.page-works .co2-tilda-page .site-footer .footer-inner.footer-index-like > span,
  html body.page-clients .co2-tilda-page .site-footer .footer-inner.footer-index-like > span,
  html body .co2-tilda-page.page-info .site-footer .footer-inner.footer-index-like > a,
  html body .co2-tilda-page.page-works .site-footer .footer-inner.footer-index-like > a,
  html body .co2-tilda-page.page-clients .site-footer .footer-inner.footer-index-like > a,
  html body.page-info .co2-tilda-page .site-footer .footer-inner.footer-index-like > a,
  html body.page-works .co2-tilda-page .site-footer .footer-inner.footer-index-like > a,
  html body.page-clients .co2-tilda-page .site-footer .footer-inner.footer-index-like > a {
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  html body .co2-tilda-page.page-works .site-footer .footer-inner.footer-index-like > span,
  html body.page-works .co2-tilda-page .site-footer .footer-inner.footer-index-like > span {
    width: 100% !important;
    justify-self: start !important;
    text-align: left !important;
  }

  html body .co2-tilda-page.page-works .site-footer .footer-inner.footer-index-like > a,
  html body.page-works .co2-tilda-page .site-footer .footer-inner.footer-index-like > a {
    width: 100% !important;
    justify-self: end !important;
    text-align: right !important;
  }
}

@media (max-width: 768px) {
  html body .co2-tilda-page .hero-credits,
  html body .co2-tilda-page .site-footer .footer-inner.footer-index-like {
    width: calc(100% - 72px) !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body .co2-tilda-page .hero-credits {
    gap: 10px !important;
  }

  html body .co2-tilda-page .site-footer .footer-inner.footer-index-like {
    gap: 10px !important;
  }

  html body .co2-tilda-page .hero-credits > span,
  html body .co2-tilda-page .site-footer .footer-inner.footer-index-like > span {
    max-width: 108px !important;
  }
}