:root {
  --u: 1px;
  --mu: min(1px, calc(100vw / 1080));
  --mobile-header-height: clamp(68px, calc(161 * var(--mu)), 161px);
  --mobile-gutter: clamp(15px, calc(32 * var(--mu)), 32px);
  --mobile-type: clamp(14px, calc(30 * var(--mu)), 30px);
  --mobile-pricing-type: clamp(13px, calc(30 * var(--mu)), 30px);
  --mobile-frame-unit: calc((min(100vw, 1080px) - var(--mobile-gutter) - var(--mobile-gutter)) / 756);
}

body { overflow-x: hidden; }

.mobile-header {
  display: block;
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: var(--mobile-header-height);
  background: #fff;
}

.mobile-header-inner {
  position: relative;
  width: min(100%, 1080px);
  height: 100%;
  margin: 0 auto;
}

.mobile-header-logo {
  position: absolute;
  top: clamp(16px, calc(36 * var(--mu)), 36px);
  left: var(--mobile-gutter);
  width: clamp(24px, calc(51.84 * var(--mu)), 51.84px);
  height: clamp(37.5px, calc(81 * var(--mu)), 81px);
  overflow: hidden;
}

.mobile-header-logo img {
  position: absolute;
  top: -28%;
  left: -64.58%;
  width: 222.92%;
  height: 142.67%;
  max-width: none;
}

.mobile-header-actions {
  position: absolute;
  top: clamp(14px, calc(46 * var(--mu)), 46px);
  right: var(--mobile-gutter);
  display: flex;
  align-items: center;
}

.mobile-view-button,
.mobile-sticky-talk {
  display: flex;
  align-items: center;
  height: clamp(33px, calc(73 * var(--mu)), 73px);
  overflow: hidden;
  border: 0;
  border-radius: clamp(5px, calc(9.407 * var(--mu)), 9.407px);
  font-family: "Inter", Arial, sans-serif;
  font-size: var(--mobile-type);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.mobile-view-button {
  appearance: none;
  justify-content: center;
  padding: 0 clamp(15px, calc(28.22 * var(--mu)), 28.22px);
  color: var(--black);
  background: var(--surface);
  cursor: pointer;
}

.mobile-view-button--work { display: none; }
body[data-view="pricing"] .mobile-view-button--pricing { display: none; }
body[data-view="pricing"] .mobile-view-button--work { display: flex; }

.mobile-sticky-talk {
  position: relative;
  width: 0;
  margin-left: 0;
  color: var(--black);
  background: var(--blue);
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(24 * var(--mu)));
  transition:
    width 520ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-left 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms ease;
}

.mobile-sticky-talk span {
  margin-left: clamp(20px, calc(37 * var(--mu)), 37px);
}

.mobile-sticky-talk img {
  position: absolute;
  top: 50%;
  right: clamp(18px, calc(36.88 * var(--mu)), 36.88px);
  width: clamp(11px, calc(20.122 * var(--mu)), 20.122px);
  height: clamp(10px, calc(19.713 * var(--mu)), 19.713px);
  transform: translateY(-50%);
}

body.mobile-header-has-talk .mobile-sticky-talk {
  width: clamp(170px, calc(367 * var(--mu)), 367px);
  margin-left: calc(10 * var(--mu));
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.frame,
body[data-view="pricing"] .frame {
  display: block;
  min-height: 0;
  overflow: visible;
}

.sidebar,
.view {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 0;
}

.sidebar {
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: clamp(82px, calc(181 * var(--mu)), 181px) var(--mobile-gutter) clamp(34px, calc(96 * var(--mu) - 9px), 87px);
}

body[data-view="pricing"] .sidebar {
  display: block;
  height: auto;
}
.sidebar > .logo,
.sidebar .pricing,
.process-copy,
.studio-copy,
.copyright,
.socials { display: none; }

.sidebar-content {
  position: static;
  display: flex;
  width: min(calc(657 * var(--mu)), 100%);
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(11px, calc(24 * var(--mu)), 24px);
}

.sidebar h1,
.intro-copy,
.sidebar h2 {
  position: static;
  width: 100%;
  font-size: var(--mobile-type);
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.sidebar h1 { font-weight: 500; }

.actions {
  position: static;
  width: 100%;
  height: clamp(34px, calc(73 * var(--mu)), 73px);
  margin: clamp(6px, calc(13 * var(--mu)), 13px) 0 0;
}

.actions .talk {
  width: 100%;
  height: 100%;
  border-radius: clamp(5px, calc(9.407 * var(--mu)), 9.407px);
  font-size: var(--mobile-type);
}

.actions .talk span { margin-left: clamp(20px, calc(37 * var(--mu)), 37px); }
.actions .talk img {
  right: clamp(18px, calc(36.88 * var(--mu)), 36.88px);
  width: clamp(11px, calc(20.122 * var(--mu)), 20.122px);
  height: clamp(10px, calc(19.713 * var(--mu)), 19.713px);
}

.sidebar h2 {
  width: 100%;
  margin-top: clamp(18px, calc(40 * var(--mu)), 40px);
  font-weight: 500;
}

.sidebar h2 strong { font-weight: 500; }

.services {
  position: static;
  width: min(calc(1000 * var(--mu)), calc(100vw - var(--mobile-gutter) - var(--mobile-gutter)));
  margin-top: clamp(6px, calc(13 * var(--mu)), 13px);
  gap: clamp(7px, calc(15 * var(--mu)), 15px);
}

.services li {
  height: clamp(23px, calc(50 * var(--mu)), 50px);
  padding: 0 clamp(10px, calc(20 * var(--mu)), 20px);
  border-radius: clamp(5px, calc(12 * var(--mu)), 12px);
  font-size: clamp(12px, calc(30 * var(--mu)), 30px);
}

.view-switcher { display: none; }

.work {
  display: block;
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 0 var(--mobile-gutter) calc(80 * var(--mu));
}

.visual-stack,
.project { position: static; }

.visual-stack {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: calc(13.228 * var(--mu));
}

.visual {
  --u: var(--mobile-frame-unit);
  width: 100%;
  height: calc(378 * var(--u));
}

.project { display: none; }

.pricing-view {
  display: none;
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 0 0 calc(80 * var(--mu));
}

body[data-view="pricing"] .work { display: none; }
body[data-view="pricing"] .pricing-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--mu));
}

.pricing-grid,
.build-card {
  position: static;
  width: 100%;
}

.pricing-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--mu));
  overflow: visible;
}

.price-card,
.build-card {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  width: calc(738 * var(--mu));
  overflow: hidden;
  border-radius: calc(13.369 * var(--mu));
}

.price-card--brand { height: calc(1075 * var(--mu)); }
.price-card--partner { height: calc(1137 * var(--mu)); }
.build-card { height: calc(1115 * var(--mu)); }

.price-card h3,
.build-card h3 {
  top: calc(50 * var(--mu));
  left: calc(41 * var(--mu));
  font-size: var(--mobile-pricing-type);
}

.price-description,
.build-card > p {
  top: calc(112 * var(--mu));
  left: calc(41 * var(--mu));
  width: calc(657 * var(--mu));
  color: var(--gray);
  font-size: var(--mobile-pricing-type);
}

.price-amount,
.price-card--partner .price-amount {
  top: calc(292 * var(--mu));
  left: calc(41 * var(--mu));
  font-size: clamp(28px, calc(60 * var(--mu)), 60px);
}

.price-amount small {
  color: var(--gray);
  font-size: var(--mobile-pricing-type);
  font-weight: 400;
}

.price-cta,
.price-card--partner .price-cta,
.build-card .price-cta {
  top: calc(416 * var(--mu));
  left: calc(41 * var(--mu));
  width: calc(657 * var(--mu));
  height: calc(73 * var(--mu));
  padding-left: calc(37 * var(--mu));
  border-radius: calc(9.407 * var(--mu));
}

.build-card .price-cta { top: calc(292 * var(--mu)); }
.price-cta--blue { background: var(--blue); }
.price-cta span { font-size: var(--mobile-pricing-type); }
.price-cta-label--desktop { display: none; }
.price-cta-label--mobile { display: inline; }

.price-cta img {
  right: calc(36.88 * var(--mu));
  width: calc(20.122 * var(--mu));
  height: calc(19.713 * var(--mu));
}

.price-divider,
.price-card--partner .price-divider,
.build-divider {
  display: block;
  top: calc(529 * var(--mu));
  left: calc(41 * var(--mu));
  width: calc(657 * var(--mu));
  height: calc(2.67 * var(--mu));
}

.build-divider { top: calc(445 * var(--mu)); }

.feature-list,
.price-card--partner .feature-list--first,
.price-card--partner .feature-list--second {
  left: calc(150 * var(--mu));
  gap: calc(23 * var(--mu));
}

.feature-list--first,
.price-card--partner .feature-list--first { top: calc(569 * var(--mu)); }
.feature-list--second,
.price-card--partner .feature-list--second { top: calc(817 * var(--mu)); }
.build-list--one { top: calc(485 * var(--mu)); }
.build-list--two { top: calc(795 * var(--mu)); }

.feature-list li {
  gap: calc(21.39 * var(--mu));
  color: var(--gray);
  font-size: var(--mobile-pricing-type);
}

.feature-list li img {
  width: calc(25.766 * var(--mu));
  height: calc(17.714 * var(--mu));
}

.mobile-pricing-footer,
.mobile-work-footer {
  display: flex;
  width: calc(100% - var(--mobile-gutter) - var(--mobile-gutter));
  height: calc(30 * var(--mu));
  margin-top: calc(40 * var(--mu));
  align-items: flex-start;
  justify-content: space-between;
  color: var(--gray);
  font-family: "Inter", Arial, sans-serif;
  font-size: var(--mobile-pricing-type);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
}

.mobile-pricing-footer nav,
.mobile-work-footer nav {
  display: flex;
  align-items: flex-start;
  gap: calc(17.65 * var(--mu));
}

.mobile-pricing-footer a,
.mobile-pricing-footer img,
.mobile-work-footer a,
.mobile-work-footer img { display: block; }
.mobile-work-footer {
  width: 100%;
  margin-top: calc(80 * var(--mu));
}
.mobile-pricing-x { width: calc(33.53 * var(--mu)); height: calc(30 * var(--mu)); }
.mobile-pricing-linkedin { width: calc(30 * var(--mu)); height: calc(30 * var(--mu)); }

@media (prefers-reduced-motion: reduce) {
  .mobile-sticky-talk { transition: none; }
}