:root {
  color-scheme: light;
  --black: #000;
  --white: #fff;
  --muted: #737373;
  --page-width: 1366px;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Neue Metana", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { display: block; }
button, input, select { font: inherit; }

.site-shell {
  width: min(100%, var(--page-width));
  margin: 0 auto;
  overflow: visible;
  background: var(--white);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 96px;
  margin-bottom: -96px;
  background: rgba(255, 255, 255, .96);
  color: var(--black);
  font-size: 16px;
  line-height: .95;
}

.site-header a {
  position: absolute;
  top: 24px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s ease;
}

.site-header a:hover,
.site-header a:focus-visible { opacity: .52; }

.grain-logo {
  left: 33px;
  top: 27px !important;
  width: 42px;
  height: 37px;
}

.grain-seed {
  position: absolute;
  object-fit: contain;
}

.grain-seed:nth-child(1) { left: 12px; top: 0; width: 17px; height: 17px; }
.grain-seed:nth-child(2) { left: 0; top: 14px; width: 22px; height: 23px; transform: rotate(-20deg); }
.grain-seed:nth-child(3) { left: 19px; top: 14px; width: 22px; height: 23px; transform: rotate(40deg); }

.site-nav a:nth-child(1) { left: 483px; }
.site-nav a:nth-child(2) { left: 619px; }
.site-nav a:nth-child(3) { left: 758px; }
.header-cta { left: 1161px; }

.hero {
  position: relative;
  height: 100svh;
  min-height: 768px;
  padding-top: 96px;
  background: var(--white);
}

.hero-kicker {
  position: absolute;
  left: 33px;
  top: clamp(405px, 49svh, 520px);
  width: 425px;
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.9px;
  opacity: 0;
  transform: translateY(16px);
  animation: intro-in .85s .18s cubic-bezier(.2,.8,.2,1) forwards;
}

.hero h1 {
  position: absolute;
  left: 21px;
  top: clamp(440px, 53svh, 560px);
  width: 1333px;
  margin: 0;
  overflow: visible;
  font-size: clamp(160px, 14.9vw, 244px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.06em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(28px);
  animation: intro-in 1s .06s cubic-bezier(.2,.8,.2,1) forwards;
}

.hero-hover-zones {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  overflow: visible;
  pointer-events: none;
}

.hero-hover-zone {
  position: absolute;
  display: block;
  pointer-events: auto;
}

.hero-hover-art {
  position: absolute;
  z-index: 1;
  max-width: none;
  height: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.985);
  transform-origin: center;
  transition: opacity 130ms ease, transform 160ms cubic-bezier(.2, .8, .2, 1);
  will-change: opacity, transform;
}

.hero-hover-zone.is-active .hero-hover-art {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-hover-art--g { left: 2px; top: -.04em; width: .823em; }
.hero-hover-art--rec { left: -.081em; top: .348em; width: 1.131em; }
.hero-hover-art--ha { left: -.083em; top: .614em; width: .892em; }
.hero-hover-art--d { left: calc(-.146em + 4px); top: 0; width: .976em; }
.hero-hover-art--s { left: -.036em; top: .32em; width: .522em; }
.hero-hover-art--ig { left: -.432em; top: -.1em; width: 1.15em; }
.hero-hover-art--n { left: -.055em; top: .414em; width: .58em; }

@media (hover: hover) and (pointer: fine) {
  .hero-hover-zones { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-hover-art { transform: none; transition: opacity 100ms linear; }
  .hero-hover-zone.is-active .hero-hover-art { transform: none; }
}

@keyframes intro-in {
  to { opacity: 1; transform: translateY(0); }
}

.case-section {
  position: relative;
  height: 852px;
  padding-top: 60px;
  background: var(--white);
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
  height: 792px;
  border: 1px solid var(--black);
}

.case-card {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  margin: 0;
  background: var(--white);
  color: var(--black);
  text-decoration: none;
  isolation: isolate;
  transition: background-color .28s ease, color .28s ease;
}

.case-card:nth-child(3n) { border-right: 0; }
.case-card:nth-last-child(-n + 3) { border-bottom: 0; }

.case-card h2 {
  position: absolute;
  left: 27px;
  top: 19px;
  z-index: 2;
  max-width: 370px;
  margin: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: .9;
  letter-spacing: -1.3px;
}

.case-card p {
  position: absolute;
  left: 27px;
  top: 56px;
  z-index: 2;
  width: 343px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.case-mark {
  position: absolute;
  z-index: 3;
  top: 26px;
  right: 25px;
  width: 18px;
  height: 19px;
}

.case-mark img,
.case-location img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter .28s ease;
}

.case-location {
  position: absolute;
  right: 19px;
  bottom: 23px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}

.case-location img { width: 10px; height: 17px; }

.case-art {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 55%;
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.case-art--palm { width: 183px; height: 183px; top: 58%; }
.case-art--pretzel { width: 168px; height: 153px; top: 56%; }
.case-art--brain { width: 149px; height: 200px; top: 52%; }
.case-art--beauty { width: 156px; height: 156px; top: 59%; transform: translate(-50%, -50%) rotate(180deg) scaleY(-1); }
.case-art--rook { width: 168px; height: 168px; top: 56%; }
.case-art--vandrouki { width: 159px; height: 159px; top: 56%; }
.case-art--glass { width: 119px; height: 177px; top: 56%; }
.case-art--house { width: 167px; height: 166px; top: 53%; }
.case-art--molecule { width: 172px; height: 172px; top: 55%; transform: translate(-50%, -50%) rotate(-18.47deg); }
.case-art--wave { width: 228px; height: 228px; top: 57%; }
.case-art--flower { width: 157px; height: 157px; top: 57%; }
.case-art--silver { width: 249px; height: 259px; top: 54%; }

@media (hover: hover) and (pointer: fine) {
  .case-card:hover,
  .case-card:focus-visible {
    background: var(--black);
    color: var(--white);
  }
  .case-card:hover .case-mark img,
  .case-card:hover .case-location img,
  .case-card:focus-visible .case-mark img,
  .case-card:focus-visible .case-location img { filter: invert(1); }
}

.services {
  position: relative;
  height: 768px;
  background: var(--white);
}

.services-inner {
  position: absolute;
  left: 123px;
  top: 70px;
  width: 1120px;
}

.services h2 {
  margin: 0 0 44px;
  font-size: 64px;
  font-weight: 400;
  line-height: .9;
  letter-spacing: -3.2px;
}

.service-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  height: 88px;
  border-bottom: 1px solid var(--black);
  align-items: center;
}

.service-row:nth-child(n) { height: 88px; }

.service-row h3 {
  margin: 0;
  padding: 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1.4px;
}

.service-row p {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.service-preview {
  position: absolute;
  z-index: 5;
  left: 40%;
  top: 50%;
  width: 280px;
  max-height: 150px;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.97);
  transition: opacity .16s ease, transform .24s ease;
}

.service-preview--wide { width: 300px; max-height: 160px; }
.service-row:nth-child(2) .service-preview { left: 47%; }

@media (hover: hover) and (pointer: fine) {
  .service-row:hover .service-preview {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.clients {
  position: relative;
  height: 768px;
  background: var(--white);
  padding-top: 92px;
}

.clients-summary {
  display: grid;
  grid-template-columns: 617px 428px;
  column-gap: 0;
  margin-left: 171px;
}

.clients-numbers p,
.clients-geography p {
  margin: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: .9;
  letter-spacing: -1.3px;
}

.clients-numbers p + p { margin-top: 4px; }

.clients-geography { position: relative; }
.clients-geography p { width: 428px; }

.flags-strip {
  position: absolute;
  left: 3px;
  top: 100px;
  width: 382px;
  height: 35px;
  overflow: hidden;
}

.flags-strip img {
  position: absolute;
  width: 107.5%;
  height: 382.22%;
  left: -2.68%;
  top: -137.22%;
  max-width: none;
}

.people-row {
  position: absolute;
  left: 162px;
  top: 347px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.person {
  width: 107px;
  margin: 0;
  text-align: center;
  font-size: 16px;
  line-height: .95;
}

.person:nth-child(3) { width: 147px; margin-left: -7px; margin-right: -20px; }

.round-image {
  position: relative;
  display: block;
  width: 77px;
  height: 77px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
}

.round-image--outlined::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: .25px;
  border: .5px solid var(--black);
  border-radius: 50%;
  pointer-events: none;
}

@media (min-width: 901px) {
  .round-image--outlined::after {
    inset: .5px;
    border: 0;
    box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .55);
  }
}

.person figcaption { margin-top: 9px; }
.person figcaption strong,
.person figcaption span { display: block; font-weight: 400; }
.person figcaption strong { font-weight: 400; }
.person figcaption span { font-weight: 300; }

.team-crop img,
.brand-crop img {
  position: absolute;
  max-width: none;
}

.team-crop--1 img { width: 682.39%; height: 166.47%; left: -206.25%; top: -32.95%; }
.team-crop--2 img { width: 690.23%; height: 168.42%; left: -384.48%; top: -35.67%; }
.team-crop--3 img { width: 728.39%; height: 169.48%; left: -38.25%; top: -35.92%; }
.team-crop--4 img { width: 690.3%; height: 166.36%; left: -560.98%; top: -33.03%; }

.brand-row {
  position: absolute;
  left: 162px;
  top: 535px;
  display: grid;
  grid-template-columns: repeat(9, 107px);
  gap: 0;
}

.brand {
  width: 107px;
  margin: 0;
  text-align: center;
  font-size: 16px;
  line-height: .95;
}

.brand figcaption { margin-top: 9px; min-height: 39px; }
.brand-crop--1 img { width: 1104.86%; height: 322.07%; left: -665.47%; top: -211.95%; }
.brand-crop--2 img { width: 1082.31%; height: 319.86%; left: -29.93%; top: -15.07%; }
.brand-crop--3 img { width: 1104.86%; height: 322.07%; left: -347.16%; top: -211.24%; }
.brand-crop--4 img { width: 1104.86%; height: 322.07%; left: -664.76%; top: -15.88%; }
.brand-crop--5 img { width: 1104.86%; height: 322.07%; left: -349.31%; top: -15.17%; }
.brand-crop--6 img { width: 1104.86%; height: 322.07%; left: -31.71%; top: -211.99%; }
.brand-crop--7 img { width: 1104.86%; height: 322.07%; left: -983.07%; top: -211.95%; }
.brand-crop--8 img { width: 1104.86%; height: 322.07%; left: -981.64%; top: -15.88%; }

.mascot-stage { background: var(--white); }
.mascot-image { width: 100%; height: 100%; object-fit: cover; }
.mascot-blink {
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 3px;
  border-bottom: 1px solid var(--black);
  border-radius: 50%;
  background: var(--white);
  opacity: 0;
  animation: mascot-blink 8s ease-in-out infinite;
  pointer-events: none;
}
.mascot-blink--1 { left: 36.3%; top: 52.7%; transform: rotate(8deg); }
.mascot-blink--2 { left: 40.3%; top: 46.2%; transform: rotate(-8deg); }

@keyframes mascot-blink {
  0%, 86%, 89%, 100% { opacity: 0; }
  87%, 88% { opacity: 1; }
}

.case-section--second { height: 852px; }

.contact {
  position: relative;
  width: 100vw;
  height: 569px;
  margin-left: calc((100% - 100vw) / 2);
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}

.contact-inner {
  position: relative;
  width: min(100%, var(--page-width));
  height: 100%;
  margin: 0 auto;
}

.contact h2 {
  position: absolute;
  left: 162px;
  top: 66px;
  width: 507px;
  margin: 0;
  font-size: 44px;
  font-weight: 400;
  line-height: .9;
  letter-spacing: -2.2px;
}

.contact-direct { position: absolute; left: 746px; top: 82px; }
.email-label { display: block; margin: 0 0 6px 3px; font-size: 16px; line-height: .95; }
.contact-email { font-size: 44px; line-height: .9; letter-spacing: -2.2px; text-decoration: none; white-space: nowrap; }

.messenger-links {
  position: relative;
  display: flex;
  gap: 13px;
  margin-top: 66px;
}

.messenger-links a {
  display: grid;
  width: 130px;
  height: 35px;
  place-items: center;
  background: var(--white);
  color: var(--black);
  font-size: 16px;
  line-height: .9;
  text-decoration: none;
  transition: background-color .2s ease, opacity .2s ease;
}

.messenger-links span {
  position: absolute;
  left: 293px;
  top: 5px;
  width: 131px;
  color: var(--white);
  font-size: 16px;
  line-height: .95;
}

.lead-form {
  position: absolute;
  left: 163px;
  top: 229px;
  width: 350px;
}

.honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.field,
.phone-field {
  display: block;
  width: 282px;
  height: 41px;
  border-bottom: 1px solid var(--white);
}

.field input,
.phone-input-wrap input {
  width: 100%;
  height: 40px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--white);
  font-size: 16px;
  line-height: .95;
}

.field input::placeholder,
.phone-input-wrap input::placeholder { color: var(--muted); opacity: 1; }

.phone-field { display: flex; align-items: center; }
.country-select-wrap {
  position: relative;
  display: flex;
  flex: 0 0 54px;
  align-items: center;
  justify-content: space-between;
  width: 54px;
  height: 40px;
  cursor: pointer;
}

.country-flag {
  display: grid;
  width: 27px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(to bottom, #fff 0 33.333%, #2354b6 33.333% 66.666%, #d52b1e 66.666% 100%);
  font-size: 20px;
  line-height: 1;
}

.country-flag.is-emoji { border: 0; background: none; }

.country-caret {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: var(--white);
  transform: translateY(2px);
}

.country-select-wrap select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  opacity: 0;
  cursor: pointer;
}

.country-dial { flex: 0 0 auto; margin-left: 11px; font-size: 16px; line-height: .95; white-space: nowrap; }
.phone-input-wrap { flex: 1; min-width: 0; margin-left: 7px; }

.lead-form button {
  position: absolute;
  left: 1px;
  top: 157px;
  width: 130px;
  height: 35px;
  border: 0;
  background: var(--white);
  color: var(--black);
  font-size: 16px;
  line-height: .9;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}

.consent-list {
  position: absolute;
  left: 151px;
  top: 161px;
  display: grid;
  gap: 14px;
  width: 250px;
}

.consent-check {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  width: 100%;
  font-size: 16px;
  line-height: 1.04;
}

.consent-check input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox-ui { width: 20px; height: 20px; border: 1px solid var(--white); background-position: center; background-repeat: no-repeat; background-size: 16px 16px; }
.consent-check input:focus-visible + .checkbox-ui { outline: 2px solid var(--white); outline-offset: 2px; }
.consent-check input:checked + .checkbox-ui {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10l4 4 8-8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.consent-check a { text-decoration-line: underline; text-underline-offset: 3px; }

.founder {
  position: absolute;
  left: 745px;
  top: 362px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.founder-photo { position: relative; width: 74px; height: 75px; overflow: hidden; border-radius: 50%; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.founder strong { font-size: 16px; line-height: .95; font-weight: 400; }
.founder small { color: var(--muted); font-size: 16px; line-height: .95; }

.privacy-link {
  position: absolute;
  left: 164px;
  top: 523px;
  width: auto;
  max-width: calc(100% - 328px);
  padding: 0;
  border: 0;
  font-size: 16px;
  line-height: .95;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.contact-email,
.consent-check,
.privacy-link,
.country-select-wrap {
  transition: opacity .2s ease;
}

.contact-email:hover,
.contact-email:focus-visible,
.consent-check:hover,
.consent-check:focus-within,
.privacy-link:hover,
.privacy-link:focus-visible,
.country-select-wrap:hover,
.country-select-wrap:focus-within { opacity: .58; }

.messenger-links a:hover,
.messenger-links a:focus-visible,
.lead-form button:hover,
.lead-form button:focus-visible { background: #d6d6d6; }

.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 20px;
  height: 20px;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: difference;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  will-change: transform;
}

.custom-cursor::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--white);
  transition: transform .2s cubic-bezier(.4, 0, 1, 1);
}

.custom-cursor.is-visible { opacity: 1; }
.custom-cursor.is-active::before { transform: scale(2); }

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor input,
  html.has-custom-cursor select,
  html.has-custom-cursor label { cursor: none !important; }
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1279px) {
  .site-shell { width: 100%; }
  .site-header { height: 84px; margin-bottom: -84px; }
  .grain-logo { left: 24px; transform: scale(.86); transform-origin: left top; }
  .site-nav a:nth-child(1) { left: 30%; }
  .site-nav a:nth-child(2) { left: 43%; }
  .site-nav a:nth-child(3) { left: 56%; }
  .header-cta { left: auto !important; right: 24px; }
  .hero { height: 100svh; min-height: 620px; }
  .hero-kicker { left: 24px; top: 51%; }
  .hero h1 { left: 18px; top: 55%; width: calc(100% - 36px); font-size: 14.9vw; letter-spacing: -.06em; }

  .case-section { height: auto; padding-top: 48px; }
  .case-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 1140px; }
  .case-card:nth-child(n) { border-right: 1px solid var(--black); border-bottom: 1px solid var(--black); }
  .case-card:nth-child(2n) { border-right: 0; }
  .case-card:nth-last-child(-n + 2) { border-bottom: 0; }
  .services { height: auto; min-height: 700px; padding: 80px 8vw; }
  .services-inner { position: static; width: 100%; }
  .services h2 { font-size: clamp(48px, 7vw, 64px); }
  .service-row { grid-template-columns: 1fr 41%; }

  .clients { height: auto; min-height: 900px; padding: 80px 8vw; }
  .clients-summary { margin: 0; grid-template-columns: 1fr 1fr; gap: 40px; }
  .clients-geography p { width: auto; }
  .people-row { position: static; margin-top: 140px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .person, .person:nth-child(3) { width: auto; margin: 0; }
  .brand-row { position: static; margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .brand { width: auto; }

  .contact h2 { left: 8vw; }
  .contact-direct { left: 55%; }
  .contact-email { font-size: clamp(32px, 3.6vw, 44px); }
  .lead-form { left: 8vw; }
  .founder { left: 55%; }
  .privacy-link { left: 8vw; }
}

@media (max-width: 767px) {
  .site-header { height: 70px; margin-bottom: -70px; }
  .grain-logo { left: 16px; top: 14px !important; transform: scale(.75); }
  .site-nav { display: none; }
  .header-cta { top: 25px !important; right: 16px; font-size: 15px; }
  .hero { height: 520px; min-height: 0; padding-top: 70px; }
  .hero-kicker { left: 16px; top: 54%; width: calc(100% - 32px); font-size: 16px; }
  .hero h1 { left: 14px; top: 65%; width: calc(100% - 28px); font-size: 16.4vw; letter-spacing: -.065em; }

  .case-section { padding-top: 32px; }
  .case-grid { grid-template-columns: 1fr; grid-template-rows: repeat(6, 1fr); height: 2160px; }
  .case-card:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--black); }
  .case-card:last-child { border-bottom: 0; }
  .case-card h2 { left: 20px; top: 18px; }
  .case-card p { left: 20px; top: 56px; width: calc(100% - 72px); }
  .case-mark { right: 20px; }
  .case-location { right: 18px; }

  .services { padding: 64px 20px; min-height: 0; }
  .services h2 { margin-bottom: 40px; font-size: 44px; letter-spacing: -2.2px; }
  .service-row { display: block; min-height: 126px; padding: 14px 0 18px; }
  .service-row:nth-child(n) { height: auto; }
  .service-row h3, .service-row p { padding: 0; }
  .service-row p { margin-top: 18px; max-width: 92%; }
  .service-preview { display: none; }

  .clients { min-height: 1240px; padding: 64px 20px; }
  .clients-summary { grid-template-columns: 1fr; gap: 36px; }
  .clients-geography p { max-width: 420px; }
  .flags-strip { position: relative; left: 0; top: 24px; width: min(100%, 382px); }
  .people-row { margin-top: 86px; grid-template-columns: repeat(2, 1fr); row-gap: 42px; }
  .brand-row { margin-top: 54px; grid-template-columns: repeat(2, 1fr); row-gap: 38px; }

  .contact { height: 735px; }
  .contact h2 { left: 20px; top: 36px; width: calc(100% - 40px); font-size: 38px; }
  .contact-direct { left: 20px; top: 177px; width: calc(100% - 40px); }
  .contact-email { font-size: clamp(27px, 8vw, 40px); letter-spacing: -.05em; }
  .messenger-links { margin-top: 42px; gap: 10px; }
  .messenger-links a { width: 125px; }
  .messenger-links span { left: 0; top: 48px; width: 220px; }
  .lead-form { left: 20px; top: 337px; width: calc(100% - 40px); }
  .field, .phone-field { width: 100%; }
  .lead-form button { top: 125px; }
  .consent-list { left: 145px; top: 129px; }
  .founder { left: 20px; top: 557px; }
  .privacy-link { left: 20px; top: 690px; width: calc(100% - 40px); max-width: calc(100% - 40px); white-space: normal; }
}

@media (max-width: 900px) {
  .contact { height: 735px; }
  .contact h2 { left: 20px; top: 36px; width: calc(100% - 40px); font-size: 38px; }
  .contact-direct { left: 20px; top: 177px; width: calc(100% - 40px); }
  .contact-email { font-size: clamp(27px, 8vw, 40px); letter-spacing: -.05em; }
  .messenger-links { margin-top: 42px; gap: 10px; }
  .messenger-links a { width: 125px; }
  .messenger-links span { left: 0; top: 48px; width: 220px; }
  .lead-form { left: 20px; top: 337px; width: calc(100% - 40px); }
  .field, .phone-field { width: 100%; }
  .lead-form button { top: 125px; }
  .consent-list { left: 145px; top: 129px; }
  .founder { left: 20px; top: 557px; }
  .privacy-link { left: 20px; top: 690px; width: calc(100% - 40px); max-width: calc(100% - 40px); white-space: normal; }
}

@media (max-width: 420px) {
  .contact { height: 790px; }
  .founder { top: 625px; }
  .privacy-link { top: 754px; }
}

/* Mobile footer uses content flow so translated text and narrow screens cannot overlap. */
@media (max-width: 767px) {
  .contact {
    height: auto;
    min-height: 0;
    scroll-margin-top: 70px;
  }

  .contact-inner {
    height: auto;
    padding: 36px 20px calc(36px + env(safe-area-inset-bottom));
  }

  .contact h2,
  .contact-direct,
  .lead-form,
  .founder,
  .privacy-link {
    position: static;
    inset: auto;
    max-width: none;
  }

  .contact h2 {
    width: 100%;
    margin: 0 0 34px;
  }

  .contact-direct {
    width: 100%;
    margin: 0 0 36px;
  }

  .contact-email {
    display: block;
    font-size: clamp(22px, 7vw, 36px);
    white-space: nowrap;
  }

  .messenger-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 42px;
  }

  .messenger-links a { width: 100%; }

  .messenger-links span {
    position: static;
    grid-column: 1 / -1;
    width: auto;
  }

  .lead-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 0 52px;
  }

  .field,
  .phone-field {
    flex: 0 0 41px;
    width: 100%;
  }

  .lead-form button {
    position: static;
    width: 130px;
    margin: 20px 0 0;
  }

  .consent-check {
    width: 100%;
  }

  .consent-list {
    position: static;
    width: min(100%, 340px);
    margin-top: 22px;
    gap: 16px;
  }

  .founder { margin: 0 0 56px; }

  .privacy-link {
    display: block;
    width: 100%;
    white-space: normal;
  }
}

.legal-body { background: var(--white); }
.legal-body .site-shell { min-height: 100svh; }
.legal-body .site-header {
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
  margin-bottom: 0;
}

@media (min-width: 1280px) {
  .legal-body .site-header .grain-logo { left: max(33px, calc(50% - 650px)); }
  .legal-body .site-header .site-nav a:nth-child(1) { left: calc(50% - 200px); }
  .legal-body .site-header .site-nav a:nth-child(2) { left: calc(50% - 64px); }
  .legal-body .site-header .site-nav a:nth-child(3) { left: calc(50% + 75px); }
  .legal-body .site-header .header-cta { left: calc(50% + 478px); }
}
.legal-main {
  width: min(100%, var(--page-width));
  min-height: calc(100svh - 96px);
  padding: 104px 162px 120px;
  background: var(--white);
  color: var(--black);
}
.legal-main > h1 {
  max-width: 1000px;
  margin: 0;
  font-size: 64px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -3.2px;
}
.legal-revision { margin: 22px 0 72px; font-size: 16px; line-height: 1.25; }
.legal-document { width: min(100%, 900px); }
.legal-document > p { margin: 0 0 42px; font-size: 20px; line-height: 1.35; }
.legal-section {
  padding: 34px 0 38px;
  border-top: 1px solid var(--black);
}
.legal-section h2 { margin: 0 0 22px; font-size: 30px; font-weight: 400; line-height: 1.05; letter-spacing: -1.2px; }
.legal-section p,
.legal-section li { font-size: 16px; line-height: 1.5; }
.legal-section p { margin: 0; }
.legal-section p + p,
.legal-section p + ul,
.legal-section ul + p { margin-top: 14px; }
.legal-section ul { margin: 14px 0 0; padding-left: 22px; }
.legal-section li + li { margin-top: 6px; }
.legal-section a { text-underline-offset: 3px; }

@media (max-width: 1279px) {
  .legal-main { min-height: calc(100svh - 84px); padding: 92px 8vw 100px; }
  .legal-main > h1 { font-size: clamp(48px, 7vw, 64px); }
}

@media (max-width: 767px) {
  .legal-main { min-height: calc(100svh - 70px); padding: 64px 20px 80px; }
  .legal-main > h1 { font-size: 42px; line-height: 1; letter-spacing: -2px; }
  .legal-revision { margin-bottom: 52px; }
  .legal-document > p { font-size: 18px; }
  .legal-section { padding: 28px 0 30px; }
  .legal-section h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Guava Invest case */
.guava-case-page { background: var(--white); }
.guava-case-page .site-shell { background: var(--white); }

.case-site-header {
  isolation: isolate;
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
  background: transparent;
  color: var(--white);
  transition: background-color .2s ease, color .2s ease;
}

.case-site-header .grain-seed {
  filter: invert(1);
  transition: filter .2s ease;
}

.case-site-header .site-nav a:nth-child(1) { left: 512px; }
.case-site-header .site-nav a:nth-child(2) { left: 646px; }
.case-site-header .site-nav a:nth-child(3) { left: 774px; }
.case-site-header .header-cta { left: 1179px; }

@media (min-width: 1280px) {
  .case-site-header .grain-logo { left: max(33px, calc(50% - 650px)); }
  .case-site-header .site-nav a:nth-child(1) { left: calc(50% - 171px); }
  .case-site-header .site-nav a:nth-child(2) { left: calc(50% - 37px); }
  .case-site-header .site-nav a:nth-child(3) { left: calc(50% + 91px); }
  .case-site-header .header-cta { left: calc(50% + 496px); }
}

.case-site-header.is-solid {
  background: rgba(255, 255, 255, .96);
  color: var(--black);
}

.case-site-header.is-solid .grain-seed { filter: none; }

.guava-hero {
  position: relative;
  width: 100vw;
  height: min(798px, 58.42vw);
  min-height: 360px;
  margin-left: calc((100% - 100vw) / 2);
  overflow: hidden;
  background: #111;
}

.guava-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.guava-hero-inner {
  position: relative;
  width: min(100%, var(--page-width));
  height: 100%;
  margin: 0 auto;
}

.guava-hero h1 {
  position: absolute;
  left: 50%;
  top: 80px;
  width: 377px;
  height: 98px;
  margin: 0;
  transform: translateX(-50%);
}

.guava-hero h1 img { width: 100%; height: 100%; object-fit: contain; }

.guava-about {
  position: relative;
  height: 600px;
  background: var(--white);
  color: var(--black);
}

.guava-about > h2 {
  position: absolute;
  left: 170px;
  top: 96px;
  margin: 0;
  font-size: 64px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -3.2px;
}

.guava-about-intro {
  position: absolute;
  left: 790px;
  top: 96px;
  width: 410px;
}

.guava-about-intro h3 {
  margin: 0 0 25px;
  color: #b7dd51;
  font-size: 27px;
  font-weight: 500;
  line-height: .95;
  letter-spacing: -1.2px;
}

.guava-about-intro p,
.guava-about-item p {
  margin: 0;
  font-size: 15px;
  line-height: .92;
  letter-spacing: -.25px;
}

.guava-about-item {
  position: absolute;
  top: 322px;
  width: 420px;
}

.guava-about-item--task { left: 170px; }
.guava-about-item--solution { left: 790px; width: 430px; }

.guava-about-item h3 {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 21px;
  font-size: 26px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -1px;
}

.guava-about-item h3 img { width: 18px; height: 18px; object-fit: contain; }
.guava-about-item p { width: 397px; }
.guava-about-item--solution p { width: 428px; }

.guava-showcase {
  position: relative;
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
  overflow: hidden;
  background: #0b0b0b;
}

.guava-showcase-inner {
  position: relative;
  width: min(100%, var(--page-width));
  aspect-ratio: 1366 / 1430;
  margin: 0 auto;
  overflow: hidden;
}

.guava-glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.guava-glow--dark { left: -22.03%; width: 144.07%; height: auto; }
.guava-glow--bright { left: -18.94%; width: 137.92%; height: auto; }
.guava-glow--pale { left: -15.33%; width: 130.75%; height: auto; }
.guava-glow--dark.guava-glow--top { top: -37.13%; }
.guava-glow--bright.guava-glow--top { top: -24.34%; }
.guava-glow--pale.guava-glow--top { top: -17.69%; }

.guava-identity-backdrop { display: none; }

.guava-site-video-frame {
  position: absolute;
  left: 7.61%;
  top: 7.97%;
  z-index: 2;
  width: 84.77%;
  height: 41.61%;
  overflow: hidden;
  background: var(--white);
}

.guava-site-video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.guava-identity-stage {
  position: absolute;
  left: 0;
  top: 49.69%;
  z-index: 2;
  width: 100%;
  aspect-ratio: 2048 / 1079;
  overflow: hidden;
}

.guava-identity-stage-base {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guava-rotating-logo,
.guava-rotating-logo-video {
  position: absolute;
  left: 15.79%;
  top: 31.05%;
  z-index: 4;
  display: block;
  width: 24.76%;
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  object-fit: contain;
  pointer-events: none;
}

.guava-rotating-logo-video {
  opacity: 0;
  transition: opacity .15s ease;
}

.guava-rotating-logo-video.is-playing { opacity: 1; }

.guava-gallery {
  display: block;
  width: 100%;
  aspect-ratio: 2048 / 866;
  padding: 0;
  overflow: hidden;
  background: var(--white);
}

.guava-gallery-composite {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1280px) {
  .guava-showcase-inner { overflow: visible; }
  .guava-glow--dark,
  .guava-glow--bright,
  .guava-glow--pale {
    left: 50%;
    transform: translateX(-50%);
  }
  .guava-glow--dark { width: max(144.07%, 104vw); height: 73.43%; }
  .guava-glow--bright { width: max(137.92%, 104vw); height: 47.76%; }
  .guava-glow--pale { width: max(130.75%, 104vw); height: 33.71%; }

  .guava-identity-backdrop {
    --identity-half: min(50vw, 683px);
    --side-fade: clamp(72px, 7vw, 128px);
    position: absolute;
    left: 50%;
    top: 49.69%;
    z-index: 1;
    display: block;
    width: 100vw;
    height: 50.31%;
    transform: translateX(-50%);
    background:
      linear-gradient(90deg,
        #0d0d0d 0%,
        #0d0d0d calc(50% - var(--identity-half) - var(--side-fade)),
        rgba(13, 13, 13, 0) calc(50% - var(--identity-half)),
        rgba(13, 13, 13, 0) calc(50% + var(--identity-half)),
        #0d0d0d calc(50% + var(--identity-half) + var(--side-fade)),
        #0d0d0d 100%),
      linear-gradient(180deg,
        #0d0d0d 0%,
        #0d0d0d 46.3%,
        #0e0f0d 46.4%,
        #1c210b 55.6%,
        #2f3b0a 60.2%,
        #4a5d07 64.9%,
        #708b0e 69.5%,
        #9ebf27 74.1%,
        #c4e749 78.8%,
        #e1fc80 83.4%,
        #eeffb1 88%,
        #eeffb2 100%);
    pointer-events: none;
  }
}

@media (max-width: 1279px) {
  .case-site-header .site-nav a:nth-child(1) { left: 30%; }
  .case-site-header .site-nav a:nth-child(2) { left: 43%; }
  .case-site-header .site-nav a:nth-child(3) { left: 56%; }
  .case-site-header .header-cta { left: auto; right: 24px; }

  .guava-hero h1 {
    top: 7vw;
    width: 27.6vw;
    height: auto;
  }

  .guava-about { height: 560px; }
  .guava-about > h2 { left: 8vw; }
  .guava-about-intro { left: 58%; width: 34%; }
  .guava-about-item--task { left: 8vw; width: 36%; }
  .guava-about-item--solution { left: 58%; width: 34%; }
  .guava-about-item p,
  .guava-about-item--solution p { width: 100%; }

}

@media (max-width: 767px) {
  .guava-hero { min-height: 250px; }
  .guava-hero h1 { display: none; }

  .guava-about {
    display: grid;
    grid-template-columns: 1fr;
    gap: 42px;
    height: auto;
    padding: 64px 20px 72px;
  }

  .guava-about > h2,
  .guava-about-intro,
  .guava-about-item {
    position: static;
    width: 100%;
  }

  .guava-about > h2 { font-size: 46px; letter-spacing: -2.2px; }
  .guava-about-intro h3 { margin-bottom: 18px; font-size: 25px; }
  .guava-about-intro p,
  .guava-about-item p { width: 100%; font-size: 15px; line-height: 1; }
  .guava-about-item h3 { margin-bottom: 18px; }

}

/* Restaurant branding case */
.restaurant-case-page,
.restaurant-case-page .site-shell { background: var(--white); }

.restaurant-case-artboard {
  position: relative;
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
  overflow: hidden;
  line-height: 0;
}

.restaurant-case-artboard > img {
  display: block;
  width: min(100%, var(--page-width));
  height: auto;
  margin: 0 auto;
}

.restaurant-case-hero {
  aspect-ratio: 1672 / 941;
  background: #431c2c;
}

.restaurant-case-hero > .restaurant-case-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.restaurant-case-hero-title-wrap {
  position: relative;
  z-index: 1;
  width: min(100%, 1672px);
  height: 100%;
  margin: 0 auto;
}

.restaurant-case-hero-title {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.restaurant-case-hero-title-mobile { display: none; }

.restaurant-case-about-desktop {
  background: var(--white);
}

.restaurant-about-word-cover {
  position: absolute;
  left: 57.76%;
  top: 41.9%;
  z-index: 2;
  width: 7.32%;
  height: 3.8%;
  background: var(--white);
}

.restaurant-case-platform {
  background: #7a1e2b;
}

.restaurant-case-platform > img {
  width: 100%;
  max-width: none;
}

.restaurant-case-gallery {
  background: var(--white);
}

.restaurant-case-about-desktop > img,
.restaurant-case-platform > img,
.restaurant-case-gallery > img { height: auto; }

.restaurant-case-about-transcript {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.restaurant-case-about-mobile { display: none; }

@media (min-width: 1367px) {
  .restaurant-about-word-cover {
    left: calc(50% + 105px);
    width: 100px;
    height: 22px;
  }

}

@media (max-width: 900px) {
  .restaurant-case-about-desktop { display: none; }
  .restaurant-case-about-transcript { display: none; }

  .restaurant-case-about-mobile {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 64px clamp(20px, 7vw, 56px) 72px;
    background: var(--white);
    color: var(--black);
  }

  .restaurant-case-about-mobile h2 {
    margin: 0;
    font-size: clamp(46px, 9vw, 64px);
    font-weight: 400;
    line-height: .95;
    letter-spacing: -.05em;
  }

  .restaurant-case-about-mobile h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 400;
    line-height: .95;
    letter-spacing: -.04em;
  }

  .restaurant-case-about-mobile .restaurant-about-intro h3 {
    display: block;
    color: #a52f31;
    font-weight: 500;
  }

  .restaurant-case-about-mobile h3 img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }

  .restaurant-case-about-mobile p {
    max-width: 620px;
    margin: 0;
    font-size: 16px;
    line-height: 1.08;
  }

  .restaurant-case-about-mobile article p + p { margin-top: 18px; }

}

@media (max-width: 767px) {
  .restaurant-case-hero {
    height: max(440px, 115vw);
    aspect-ratio: auto;
  }

  .restaurant-case-hero-photo { object-position: left center; }
  .restaurant-case-hero-title { display: none; }

  .restaurant-case-hero-title-mobile {
    position: absolute;
    left: 18px;
    top: 90px;
    display: block;
    width: min(82vw, 360px);
    height: auto;
  }

  .restaurant-case-about-mobile {
    gap: 42px;
    padding: 56px 20px 64px;
  }

  .restaurant-case-about-mobile h2 { font-size: 46px; }
  .restaurant-case-about-mobile h3 { font-size: 24px; }
  .restaurant-case-about-mobile p { font-size: 15px; line-height: 1.05; }
}

/* OH MY NAILS identity case */
.beauty-case-page,
.beauty-case-page .site-shell { background: var(--white); }

.beauty-case-artboard,
.beauty-video-section {
  position: relative;
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
  overflow: hidden;
  background: var(--white);
  line-height: 0;
}

.beauty-case-stage,
.beauty-video-artboard {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1366 / 768;
  margin: 0 auto;
  overflow: hidden;
  background: var(--white);
}

.beauty-case-blur,
.beauty-video-backdrop {
  position: absolute;
  inset: -3%;
  z-index: 0;
  display: none;
  background-position: center;
  background-size: cover;
  filter: blur(30px);
  opacity: .84;
  pointer-events: none;
}

.beauty-case-hero .beauty-case-blur {
  background-color: #e93f7c;
  background-image: url("/assets/sites-v21-r2/cases/beauty-identity/hero-photo.webp");
}

.beauty-case-social .beauty-case-blur {
  background-color: #b6c6ea;
  background-image: url("/assets/sites-v21-r2/cases/beauty-identity/social-collage-photo.webp");
}

.beauty-case-photo-pair .beauty-case-blur {
  inset: 0;
  background: var(--white);
  filter: none;
  opacity: 1;
}

.beauty-hero-photo,
.beauty-social-photo,
.beauty-video-bg {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.beauty-case-social .beauty-social-photo {
  width: 103.35%;
  max-width: none;
  margin-left: -3.35%;
}

.beauty-hero-logo {
  position: absolute;
  left: 39.17%;
  top: 38.09%;
  width: 24.96%;
  height: 23.82%;
}

.beauty-about {
  position: relative;
  height: 578px;
  background: var(--white);
  color: var(--black);
}

.beauty-about > h2 {
  position: absolute;
  left: 169px;
  top: 102px;
  margin: 0;
  font-size: 64px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -3.2px;
}

.beauty-about-intro {
  position: absolute;
  left: 789px;
  top: 106px;
  width: 404px;
}

.beauty-about-intro h3 {
  margin: 0 0 28px;
  color: #f48dad;
  font-size: 26px;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -1.1px;
}

.beauty-about-intro p,
.beauty-about-item p {
  margin: 0;
  font-size: 14px;
  line-height: .93;
  letter-spacing: -.16px;
}

.beauty-about-item {
  position: absolute;
  top: 329px;
  width: 404px;
}

.beauty-about-item--task { left: 169px; width: 395px; }
.beauty-about-item--result { left: 789px; width: 434px; }

.beauty-about-item h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 23px;
  font-size: 26px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -1px;
}

.beauty-about-item h3 img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.beauty-about-item p + p { margin-top: 27px; }

.beauty-logo-grid-vector {
  position: absolute;
  left: 12.34%;
  top: 10.98%;
  width: 77.22%;
  height: 80.85%;
}

.beauty-palette-vector {
  position: absolute;
  left: 11.24%;
  top: 14.83%;
  width: 77.44%;
  height: 71.42%;
}

.beauty-photo-pair-item {
  position: absolute;
  top: 6.38%;
  height: 87.11%;
  object-fit: fill;
}

.beauty-photo-pair-item--left {
  left: 1.90%;
  width: 48.24%;
}

.beauty-photo-pair-item--right {
  left: 50.95%;
  width: 48.39%;
}

.beauty-video-backdrop {
  background: #edf1fa url("/assets/sites-v21-r2/cases/beauty-identity/block7-bg.webp") center / cover no-repeat;
}

.beauty-phone {
  position: absolute;
  left: 60.58%;
  top: 6.99%;
  z-index: 2;
  width: 26.28%;
  aspect-ratio: 776 / 1448;
}

.beauty-scroll-video {
  position: absolute;
  left: 6.57%;
  top: 2.07%;
  z-index: 1;
  width: 82.09%;
  height: 95.58%;
  border: 0;
  border-radius: 14% / 6.5%;
  background: var(--white);
  object-fit: cover;
}

.beauty-phone-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

@media (max-width: 1279px) {
  .beauty-about > h2,
  .beauty-about-item--task { left: 8vw; }

  .beauty-about-intro,
  .beauty-about-item--result { left: 58%; }

  .beauty-about-intro { width: 34%; }
  .beauty-about-item--task { width: 36%; }
  .beauty-about-item--result { width: 34%; }
}

@media (max-width: 767px) {
  .beauty-about {
    display: grid;
    grid-template-columns: 1fr;
    gap: 42px;
    height: auto;
    padding: 64px 20px 72px;
  }

  .beauty-about > h2,
  .beauty-about-intro,
  .beauty-about-item {
    position: static;
    width: 100%;
  }

  .beauty-about > h2 {
    font-size: 46px;
    letter-spacing: -2.2px;
  }

  .beauty-about-intro h3 {
    margin-bottom: 18px;
    font-size: 25px;
  }

  .beauty-about-intro p,
  .beauty-about-item p {
    width: 100%;
    font-size: 15px;
    line-height: 1;
  }

  .beauty-about-item h3 { margin-bottom: 18px; }
  .beauty-about-item p + p { margin-top: 18px; }

  .beauty-video-artboard {
    width: 100%;
    height: clamp(560px, 150vw, 740px);
    aspect-ratio: auto;
  }

  .beauty-video-bg {
    object-fit: cover;
    object-position: center;
  }

  .beauty-phone {
    left: 50%;
    top: 5.5%;
    width: min(72vw, 360px);
    transform: translateX(-50%);
  }
}

/* Andrey Gostryy case */
.gostryy-case-page,
.gostryy-case-page .site-shell { background: var(--white); }

.gostryy-case-page .case-site-header:not(.is-solid) {
  color: var(--black);
}

.gostryy-case-page .case-site-header:not(.is-solid) .grain-seed {
  filter: none;
}

/* Vandrouki and Terra Nostra catalogue cases */
.portfolio-case-page,
.portfolio-case-page .site-shell { background: var(--white); }

.portfolio-case-page .case-site-header:not(.is-solid) {
  color: var(--white);
}

.portfolio-case-artboard {
  position: relative;
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
  overflow: hidden;
  line-height: 0;
}

.portfolio-case-artboard > img {
  display: block;
  width: 100%;
  height: auto;
}

.portfolio-about-mobile { display: none; }

.catalog-demo {
  position: absolute;
  left: 21.60%;
  top: 18.45%;
  z-index: 2;
  width: 57.25%;
  height: 65.17%;
  border: 0;
  background: #1b1b1b;
  object-fit: cover;
}

.catalog-final-section .catalog-site-credit {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2vw, 32px);
  z-index: 2;
  color: #111;
  font-size: clamp(10px, 1vw, 16px);
  line-height: 1;
  transform: translateX(-50%);
}

.vandrouki-final-section .vandrouki-site-credit {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2vw, 32px);
  z-index: 2;
  color: #111;
  font-size: clamp(10px, 1vw, 16px);
  line-height: 1;
  text-decoration: none;
  transform: translateX(-50%);
  transition: opacity .2s ease;
}

.vandrouki-final-section .vandrouki-site-credit:hover,
.vandrouki-final-section .vandrouki-site-credit:focus-visible { opacity: .55; }

@media (min-width: 768px) {
  .catalog-case-page .portfolio-case-hero {
    height: 100svh;
    background: #050505;
  }

  .catalog-case-page .portfolio-case-hero > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
}

@media (max-width: 767px) {
  .portfolio-about-desktop { display: none; }

  .portfolio-about-mobile {
    display: grid;
    grid-template-columns: 1fr;
    gap: 42px;
    padding: 64px 20px 72px;
    background: var(--white);
    color: var(--black);
  }

  .portfolio-about-mobile h2,
  .portfolio-about-mobile h3,
  .portfolio-about-mobile p { margin: 0; }

  .portfolio-about-mobile h2 {
    font-size: 46px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -2.2px;
  }

  .portfolio-about-mobile h3 {
    margin-bottom: 18px;
    font-size: 25px;
    font-weight: 400;
    line-height: .95;
    letter-spacing: -1px;
  }

  .portfolio-about-mobile .portfolio-about-intro h3 {
    font-weight: 700;
  }

  .vandrouki-case-page .portfolio-about-intro h3 { color: #2581fa; }
  .catalog-case-page .portfolio-about-intro h3 { color: #ceb8df; }

  .portfolio-about-mobile p {
    font-size: 15px;
    line-height: 1.05;
  }

  .portfolio-about-mobile article p + p { margin-top: 18px; }

  .catalog-demo { border-radius: 2px; }

  .catalog-final-section .catalog-site-credit {
    bottom: 8px;
    font-size: 9px;
  }

  .vandrouki-final-section .vandrouki-site-credit {
    bottom: 8px;
    font-size: 9px;
  }
}

/* Bavarian restaurant identity case */
.bavarian-case-page,
.bavarian-case-page .site-shell { background: var(--white); }

.bavarian-case-about {
  position: relative;
  width: 100vw;
  height: 578px;
  margin-left: calc((100% - 100vw) / 2);
  background: var(--white);
  color: var(--black);
}

.bavarian-case-about > h2 {
  position: absolute;
  left: max(8vw, calc(50% - 514px));
  top: 101px;
  margin: 0;
  font-size: 64px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -3.2px;
}

.bavarian-about-intro,
.bavarian-about-item {
  position: absolute;
  width: 440px;
}

.bavarian-about-intro {
  left: calc(50% + 106px);
  top: 104px;
}

.bavarian-about-item--task {
  left: max(8vw, calc(50% - 514px));
  top: 326px;
}

.bavarian-about-item--result {
  left: calc(50% + 106px);
  top: 326px;
}

.bavarian-about-intro h3,
.bavarian-about-item h3,
.bavarian-about-intro p,
.bavarian-about-item p { margin: 0; }

.bavarian-about-intro h3 {
  margin-bottom: 25px;
  color: #1f4fa4;
  font-size: 24px;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.9px;
}

.bavarian-about-item h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 21px;
  font-size: 26px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -1px;
}

.bavarian-about-item h3 img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.bavarian-about-intro p,
.bavarian-about-item p {
  font-size: 14px;
  line-height: .98;
  letter-spacing: -.15px;
}

.bavarian-about-item p + p { margin-top: 18px; }

@media (max-width: 1279px) and (min-width: 768px) {
  .bavarian-about-intro,
  .bavarian-about-item--result { left: 58%; width: 34%; }
  .bavarian-about-item--task { width: 36%; }
}

@media (max-width: 767px) {
  .bavarian-case-about {
    display: grid;
    grid-template-columns: 1fr;
    gap: 42px;
    height: auto;
    padding: 64px 20px 72px;
  }

  .bavarian-case-about > h2,
  .bavarian-about-intro,
  .bavarian-about-item {
    position: static;
    width: 100%;
  }

  .bavarian-case-about > h2 {
    font-size: 46px;
    letter-spacing: -2.2px;
  }

  .bavarian-about-intro h3 {
    margin-bottom: 18px;
    font-size: 25px;
  }

  .bavarian-about-intro p,
  .bavarian-about-item p {
    font-size: 15px;
    line-height: 1.05;
  }

  .bavarian-about-item h3 { margin-bottom: 18px; }
}

.gostryy-artboard {
  position: relative;
  width: 100vw;
  aspect-ratio: 1366 / 768;
  margin-left: calc((100% - 100vw) / 2);
  overflow: hidden;
  line-height: 0;
}

.gostryy-artboard > .gostryy-base,
.gostryy-hero > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.gostryy-hero {
  aspect-ratio: 1366 / 769;
  background: #d1e8f5;
}

.gostryy-about {
  position: relative;
  height: 580px;
  background: var(--white);
  color: var(--black);
}

.gostryy-about > h2 {
  position: absolute;
  left: 155px;
  top: 81px;
  margin: 0;
  font-size: 64px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -3.2px;
}

.gostryy-about-intro {
  position: absolute;
  left: 789px;
  top: 82px;
  width: 410px;
}

.gostryy-about-intro h3 {
  margin: 0 0 25px;
  color: #3f4fe4;
  font-size: 27px;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -1.2px;
}

.gostryy-about-intro p,
.gostryy-about-item p {
  margin: 0;
  font-size: 15px;
  line-height: .93;
  letter-spacing: -.25px;
}

.gostryy-about-item {
  position: absolute;
  top: 322px;
  width: 430px;
}

.gostryy-about-item--task { left: 155px; width: 410px; }
.gostryy-about-item--result { left: 789px; width: 440px; }

.gostryy-about-item h3 {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 21px;
  font-size: 26px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -1px;
}

.gostryy-about-item h3 img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.gostryy-about-item p + p { margin-top: 24px; }

.gostryy-video {
  position: absolute;
  z-index: 2;
  display: block;
  border: 0;
  background: #111;
  object-fit: cover;
}

.gostryy-block3-video {
  left: 11.42%;
  top: 13.54%;
  width: 77.23%;
  height: 70.57%;
  border-radius: 2.65% / 5.2%;
}

.gostryy-block4-video {
  left: 11.42%;
  top: 9.51%;
  width: 37.63%;
  height: 81.64%;
  border-radius: 5.6% / 4.6%;
}

.gostryy-block6-video {
  left: 53.07%;
  top: 9.24%;
  width: 37.63%;
  height: 81.64%;
  border-radius: 5.6% / 4.6%;
}

@media (max-width: 1279px) {
  .gostryy-about > h2,
  .gostryy-about-item--task { left: 8vw; }

  .gostryy-about-intro,
  .gostryy-about-item--result { left: 58%; }

  .gostryy-about-intro { width: 34%; }
  .gostryy-about-item--task { width: 36%; }
  .gostryy-about-item--result { width: 34%; }
}

@media (max-width: 767px) {
  .gostryy-about {
    display: grid;
    grid-template-columns: 1fr;
    gap: 42px;
    height: auto;
    padding: 64px 20px 72px;
  }

  .gostryy-about > h2,
  .gostryy-about-intro,
  .gostryy-about-item {
    position: static;
    width: 100%;
  }

  .gostryy-about > h2 {
    font-size: 46px;
    letter-spacing: -2.2px;
  }

  .gostryy-about-intro h3 {
    margin-bottom: 18px;
    font-size: 25px;
  }

  .gostryy-about-intro p,
  .gostryy-about-item p {
    width: 100%;
    font-size: 15px;
    line-height: 1;
  }

  .gostryy-about-item h3 { margin-bottom: 18px; }
  .gostryy-about-item p + p { margin-top: 18px; }
}

/* Catalogue hero: photo fills wide screens while the artwork keeps its proportions. */
.catalog-hero-responsive { display: none; }

@media (min-width: 768px) {
  .catalog-case-page .portfolio-case-hero > img { display: none; }

  .catalog-hero-responsive {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
  }

  .catalog-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .catalog-hero-responsive::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background: linear-gradient(180deg, transparent 9%, rgba(0, 0, 0, .16) 37%, rgba(0, 0, 0, .7) 100%);
    pointer-events: none;
  }

  .catalog-hero-art {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: min(100%, 177.865svh);
    aspect-ratio: 1366 / 768;
    transform: translate(-50%, -50%);
  }

  .catalog-hero-art::before {
    position: absolute;
    left: 46.63%;
    top: 62.1%;
    z-index: 1;
    width: 6.66%;
    height: 4.7%;
    content: "";
    border-radius: 49% 52% 47% 55% / 70% 56% 70% 54%;
    background: rgba(53, 50, 50, .88);
    transform: rotate(-8deg);
  }

  .catalog-hero-art > img:first-child { position: relative; z-index: 2; width: 100%; height: 100%; }

  .catalog-hero-terra,
  .catalog-hero-ping { position: absolute; z-index: 3; height: auto; }

  .catalog-hero-terra { left: 38.21%; top: 81.25%; width: 8.93%; }
  .catalog-hero-ping { left: 63.69%; top: 81.64%; width: 16.18%; }
}

/* Cheshsky traktir U Gasheka: restaurant site case. */
.restaurant-site-case-page,
.restaurant-site-case-page .site-shell { background: var(--white); }

.restaurant-site-case-page .case-site-header:not(.is-solid) {
  background: linear-gradient(to bottom, rgba(255, 255, 255, .94) 0 64px, transparent 64px);
  color: var(--black);
}

.restaurant-site-case-page .case-site-header:not(.is-solid) .grain-seed { filter: none; }

.restaurant-site-hero {
  position: relative;
  width: 100vw;
  height: clamp(430px, 54.25vw, 780px);
  margin-left: calc((100% - 100vw) / 2);
  overflow: hidden;
  background: #5c3926;
}

.restaurant-site-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% top;
  transform: scale(1.03);
  transform-origin: center top;
}

.restaurant-site-hero-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100%, 1366px);
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.restaurant-site-mobile-art { display: none; }

.restaurant-site-about {
  position: relative;
  width: 100vw;
  height: 578px;
  margin-left: calc((100% - 100vw) / 2);
  background: var(--white);
  color: var(--black);
}

.restaurant-site-about > h2,
.restaurant-site-about-intro,
.restaurant-site-about-item { position: absolute; }

.restaurant-site-about > h2 {
  left: calc(50% - 513px);
  top: 124px;
  margin: 0;
  font-size: 64px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -3.2px;
}

.restaurant-site-about-intro {
  left: calc(50% + 107px);
  top: 124px;
  width: 450px;
}

.restaurant-site-about-item {
  top: 308px;
  width: 452px;
}

.restaurant-site-about-item--task { left: calc(50% - 513px); }
.restaurant-site-about-item--result { left: calc(50% + 107px); }

.restaurant-site-about-intro h3,
.restaurant-site-about-item h3,
.restaurant-site-about-intro p,
.restaurant-site-about-item p { margin: 0; }

.restaurant-site-about-intro h3 {
  margin-bottom: 26px;
  color: #762233;
  font-size: 24px;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.8px;
}

.restaurant-site-about-intro h3 em { font-weight: 400; }

.restaurant-site-about-item h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 19px;
  font-size: 26px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -1px;
}

.restaurant-site-about-item h3 img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.restaurant-site-about-intro p,
.restaurant-site-about-item p {
  font-size: 16px;
  line-height: .93;
  letter-spacing: -.2px;
}

.restaurant-site-about-item p + p { margin-top: 15px; }

.restaurant-site-artboard {
  position: relative;
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
  overflow: hidden;
  line-height: 0;
}

.restaurant-site-artboard > .restaurant-site-base {
  display: block;
  width: 100%;
  height: auto;
}

.restaurant-site-video {
  position: absolute;
  z-index: 2;
  display: block;
  object-fit: cover;
  background: #fffdf5;
}

.restaurant-site-demo-video {
  left: 17.68%;
  top: 18.09%;
  width: 64.71%;
  height: 61.31%;
  border-radius: 2.5% / 5%;
  object-fit: contain;
  background: #fffdf5;
}

.restaurant-site-phone-video {
  left: 42.94%;
  top: 59.92%;
  width: 15.29%;
  height: 30.14%;
  border-radius: 8% / 3.5%;
}

.restaurant-site-phone-frame {
  position: absolute;
  left: 41.87%;
  top: 58.14%;
  z-index: 3;
  width: 17.42%;
  height: 33.72%;
  pointer-events: none;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .restaurant-site-about { height: 650px; }
  .restaurant-site-about > h2,
  .restaurant-site-about-item--task { left: 7%; }
  .restaurant-site-about-intro,
  .restaurant-site-about-item--result { left: 55%; }
  .restaurant-site-about-intro,
  .restaurant-site-about-item--result { width: 39%; }
  .restaurant-site-about-item--task { width: 40%; }
  .restaurant-site-about-item { top: 295px; }
}

@media (max-width: 767px) {
  .restaurant-site-case-page .case-site-header:not(.is-solid) {
    background: transparent;
    color: var(--white);
  }

  .restaurant-site-case-page .case-site-header:not(.is-solid) .grain-seed {
    filter: invert(1);
  }

  .restaurant-site-hero {
    height: clamp(500px, 132vw, 670px);
  }

  .restaurant-site-hero-photo { object-position: center; }
  .restaurant-site-hero-overlay { display: none; }

  .restaurant-site-mobile-art {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 16px 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 15px rgba(30, 12, 8, .38);
  }

  .restaurant-site-mobile-title {
    font-family: Impact, "Arial Narrow", sans-serif;
    font-size: clamp(64px, 18vw, 120px);
    font-stretch: condensed;
    line-height: .88;
    white-space: nowrap;
  }

  .restaurant-site-mobile-script {
    margin-top: 42px;
    font-family: cursive;
    font-size: clamp(20px, 5.4vw, 32px);
    font-style: italic;
    line-height: 1;
  }

  .restaurant-site-mobile-button {
    margin-top: 32px;
    padding: 12px 22px;
    border-radius: 999px;
    background: #fffdf5;
    color: #762233;
    font-size: 12px;
    text-shadow: none;
  }

  .restaurant-site-about {
    display: grid;
    grid-template-columns: 1fr;
    gap: 42px;
    height: auto;
    padding: 64px 20px 72px;
  }

  .restaurant-site-about > h2,
  .restaurant-site-about-intro,
  .restaurant-site-about-item {
    position: static;
    width: 100%;
  }

  .restaurant-site-about > h2 {
    font-size: 46px;
    letter-spacing: -2.2px;
  }

  .restaurant-site-about-intro h3 {
    margin-bottom: 18px;
    font-size: 25px;
  }

  .restaurant-site-about-intro p,
  .restaurant-site-about-item p {
    font-size: 15px;
    line-height: 1.05;
  }

  .restaurant-site-about-item h3 { margin-bottom: 18px; }
  .restaurant-site-about-item p + p { margin-top: 18px; }

  .restaurant-site-demo-video { border-radius: 2% / 4%; }
  .restaurant-site-phone-video { border-radius: 6% / 3%; }
}

/* Keep both acknowledgements in content flow at every viewport width. */
@media (min-width: 768px) and (max-width: 900px) {
  .flags-strip { width: min(100%, 382px); }
  .contact { height: 880px; }
  .lead-form { top: 382px; }
  .consent-list { left: 145px; width: min(260px, calc(100vw - 190px)); }
  .founder { top: 665px; }
  .privacy-link { top: 815px; }
}

/* iOS landscape can leave a scrolled sticky header below the visual viewport edge. */
@media (orientation: landscape) and (max-height: 600px) {
  .site-header {
    position: fixed;
    top: 0;
    left: 50%;
    width: min(100%, var(--page-width));
    margin: 0;
    transform: translateX(-50%);
  }

  .case-site-header,
  .legal-body .site-header {
    left: 0;
    width: 100vw;
    transform: none;
  }
}